如何在SCSS中快速生成一套符合Material Design规范的CSS阴影？-css教程-PHP中文网

material design 规范仅用两层阴影：底部主影+顶部柔光，sass mixin按1–5dp自动生成对应参数；需用unquote()避免引号导致失效，变量命名比函数调用更安全高效。

如何在scss中快速生成一套符合material design规范的css阴影？

box-shadow 的多层组合不是靠“写得越多越像”，而是按海拔高度（dp）映射到两层阴影的偏移、模糊和透明度变化。直接硬编码或堆砌5层阴影，反而偏离 Material Design 实际规范——它绝大多数场景只用 **两层阴影**：一层主投影（bottom），一层顶部柔光（top）。

Material Design 官方推荐的阴影结构是「底部主影 + 顶部柔光」，Sass mixin 正好封装这个逻辑：
它接受 $depth（1–5），对应 1dp 到 24dp 海拔，自动计算两层参数。

$depth: 1 → box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
$depth: 3 → 主影偏移加大、模糊加长、顶部柔光变浅，整体更“浮”
不要传 0 或 6 —— @if $depth 和 <code>@elseif $depth > 5 会拦截并警告
函数 bottom-shadow() 和 top-shadow() 必须返回 Sass list（不是字符串），否则 box-shadow 编译失败

当你用 @function 拼接多层阴影时，Sass 默认把整个结果当字符串处理，编译后带双引号，浏览器直接忽略整条 box-shadow 声明。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

错误写法：@return #{$offset} #{$blur} rgba(0,0,0,0.12) → 输出 "0 2px 4px rgba(0,0,0,0.12)"
正确写法：先 join(", ", $shadow-list)，再套 unquote() → 输出无引号的合法 CSS 值
每一层必须是完整三元组（水平偏移、垂直偏移、模糊半径），漏掉模糊（哪怕写 0）会导致该层静默失效
移动端慎用 >8px 模糊值，Android WebView 会强制降采样，边缘发虚

90% 的项目不需要运行时切换或 JS 读取阴影值，直接用语义化变量（如 $shadow-card、$shadow-modal）比 shadow("modal") 更快、更稳、更易协作。

$shadow-card 值必须带单位：0px 2px 4px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24) —— 混用 0 和 0px 会触发 Incompatible units 编译错误
别用 $shadow-2 这类像素命名，设计师说“卡片用中等阴影”，你改 $shadow-card 就行，不用全局搜 shadow-4
深色模式不靠变量名区分，而是在主题文件里重定义同一变量：$shadow-card: 0px 2px 4px rgba(255,255,255,0.08), ...
禁止在变量里塞 inset 或 !important —— 这些属于使用上下文，应留在选择器里控制