阴影与圆角

阴影在这里被拆成层：box-shadow 一张表，每层有 x/y 偏移、模糊、扩散、颜色与 inset、启用两个开关，可以逐层启用或删除；text-shadow 的表折在「text-shadow 层」折叠里，summary 直接把层数与启用数写出来，收起只是藏起来，这些层仍然参与计算与输出。输出时值为 0 的 blur/spread 会被省略（浏览器默认即 0），x/y 始终保留以免后续值错位；inset 统一写在层首。多层用逗号连接，顺序即绘制顺序——写在最前面的层画在最上面，所以大模糊的「环境层」放最后，紧贴轮廓的锐层放最前。圆角区四角独立可调，输出永远取最短简写。

box-shadow 只参与绘制不参与布局——它不占空间、不会把兄弟元素挤走，也不触发 reflow，而 filter: drop-shadow() 按元素的 alpha 轮廓投影，透明 PNG 与异形 SVG 会「跟形」，代价是整个元素重新栅格化且 inset 阴影不支持。想画「不改变盒子尺寸的描边」时用 inset 0 0 0 1px 颜色 代替 border——border 会加进盒尺寸（除非 box-sizing 已统一处理），inset 阴影完全不动布局。text-shadow 不支持 spread 与 inset，输出时自动剔除。三档「Material-ish 阶梯」是本页自写的公式，只是给个起步参考，不是 Material Design 的官方数值。

阴影与圆角怎么用

• 按层搭阴影：一层定轮廓（小模糊、低透明）、一层定扩散（大模糊）是稳妥起点；「添加层」在 pane 标题行右侧，新建 0 0 10px 10% 黑，改数即可。inset 与启用都是每层独立的开关（role=switch，亮即开），关掉的层保留参数但不进输出；只剩一层时「删」按钮禁用。颜色框按 CSS 颜色语法校验，写错的层会在页顶横幅点名第几层与原因，改对即消失。
• 圆角与椭圆角：四个数字框对应 tl/tr/br/bl；打开椭圆角开关才会出现第二排纵向值框（开关同时驱动那一行的显隐），做药丸形或椭圆卡片时用 横/纵 两段，输出栏的 meta 会写明「含椭圆角斜杠语法」。纵向集合与横向完全相同时不输出多余的斜杠段，输出永远取最短简写。圆角区四角独立可调（顺序 tl tr br bl），全等时自动折叠成 border-radius: 12px 单值简写，上下对称时折叠成两值，右侧与左侧同值时折叠成三值；打开椭圆角后多出第二组纵向半径，用规范斜杠语法 border-radius: 横 / 纵 输出。
• 用预设起步：低 e=1／中 e=3／高 e=8 是一组分段按钮，按下哪一档取决于当前 box 层是否整套等于该档公式：整套套用才亮，手改任意一层的任意一个值就立刻解除，meta 行分别写「已整套套用「中」，改任意 box 层即解除」与「当前 box 层不是整套预设」。套用预设是整组替换 box 层（原来手搭的层会被覆盖），text-shadow 层与圆角不受影响；预览卡实时反映这三行声明，可直接截图给同事看。三档「Material-ish 阶梯」是本页自写的公式（主层 y=e、blur=2e、alpha 0.2，副层 y=round(e/2)、blur=round(0.75e)、alpha 0.12），只是给个起步参考，不是 Material Design 的官方数值。
• 预览卡与口径说明：预览卡在版面最上方、固定 220px 高，吃的就是下方输出那同一组声明；底色、文字、描边都取本站的 CSS 变量，明暗主题切换时预览跟着主题走。四条口径说明收在页底「口径说明（4 条，纯文字参考，收起/展开都不影响计算与输出）」折叠里，逐条摊在一张 kv 表上，第三、第四条分别讲多层顺序与暗色主题。

常见问题