使用方法
- 设置第一层的“水平偏移”和“垂直偏移”。正的垂直偏移使阴影向下移动。
- 提高“模糊”可使边缘柔和；提高“扩展”可使阴影比盒子更大或更小。
- 选择“颜色”和“透明度”。用“添加一层”加入更多层，可得到更自然的阴影。
- 复制“CSS”声明，并把它粘贴到您的元素样式规则中。
属性如何构成
box-shadow 属性可接受一个或多个阴影，阴影之间用逗号分隔。每个阴影依次写作：可选的 inset 关键字、水平与垂直偏移、模糊半径、扩展距离和颜色。第一个阴影绘制在其他阴影之上；没有阴影时，属性值为 none。
模糊半径从不为负。模糊越大，阴影在越宽的范围内柔和地散开；扩展阴影会在模糊之前使阴影变大或缩小。透明度以 rgba 颜色的 alpha 值写出，最多保留两位小数。
box-shadow: [inset] offset-x offset-y blur spread color, ...各层与编辑器的检查
柔和自然的阴影通常有两层：一层较小、较深，紧贴盒子；另一层较大、较浅，延伸得更远。值中的每一层就是一个阴影。编辑器最多允许8层，偏移和扩展为 -200至200像素，模糊为0至200像素，透明度为0至100%。
预览与代码使用同样的值，因此所见即浏览器所绘。非常大的模糊和扩展在旧手机上绘制较慢，因此请使用能达到效果的最小值。
计算示例：带两层阴影的卡片
第一层的水平偏移为0、垂直偏移为4像素，模糊为6，无扩展，颜色为黑色，透明度为10%。第二层的偏移为0和10像素，模糊为20，透明度为15%。值为 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15)。
把它粘贴到卡片上，卡片下方紧贴处的阴影清晰，更远处的阴影柔和。
常见问题
inset 有什么作用？
内阴影绘制在盒子内部、沿着边缘，好像盒子被按下去一样。它适用于输入框和按下状态的按钮。一个盒子可以同时有内阴影和外阴影。
偏移为什么有正负号？
正的水平偏移使阴影向右，负的则向左。正的垂直偏移使阴影向下，因此落在盒子下方的阴影取正值。
模糊与扩展有什么区别？
模糊使阴影的边缘变柔和，让它在更宽的范围内渐渐消失。扩展则在模糊之前使阴影本身变大，为负时变小。模糊不会小于零，扩展却可以。
生成的 CSS 与所有浏览器兼容吗？
不带前缀的 box-shadow 属性，配合逗号分隔的多层阴影和 rgba 颜色，已被所有现代浏览器支持，并已有多年。该声明无需任何厂商前缀即可直接使用。
编辑器会保存或发送任何内容吗？
不会。阴影在您的浏览器中绘制，既不会保存，也不会发送到我们的服务器。离开页面前请先复制 CSS，因为刷新后会重新从默认阴影开始。
资料来源
数据和文字最近核对于2026年11月10日星期二。