offset-X (水平偏移):阴影在水平方向的偏移量。正值向右偏移,负值向左偏移。单位px。
offset-Y (垂直偏移):阴影在垂直方向的偏移量。正值向下偏移,负值向上偏移。单位px。
blur (模糊半径):阴影的模糊程度,值越大阴影越模糊越柔和。值为0时阴影边缘清晰锐利。单位px。
spread (扩散半径):阴影的扩散范围,正值使阴影向四周扩展,负值使阴影收缩。单位px。
color (颜色):阴影的颜色,支持任意CSS颜色值,推荐使用带透明度的颜色(如rgba或hsla)获得更自然的阴影效果。
inset (内阴影):勾选后阴影显示在元素内部,产生凹陷或内嵌的视觉效果。
box-shadow作用于整个元素盒子,text-shadow作用于文本内容。box-shadow支持spread扩散半径和inset内阴影,text-shadow不支持这两个参数。两者可以同时使用,互不冲突。
使用半透明颜色(如rgba(0,0,0,0.3))替代纯色,配合适当的模糊值。多层阴影叠加(一层近距柔和+一层远距扩散)可以模拟真实物理光照效果。水平和垂直偏移值保持接近,避免阴影过于偏向一侧。
纯前端应用,加载后断开网络也能正常使用。所有计算在浏览器本地完成。
box-shadow属性从IE9+开始支持,所有现代浏览器(Chrome、Firefox、Safari、Edge)完全支持。无需浏览器前缀。
大量使用box-shadow(尤其大面积模糊阴影)会降低页面渲染性能,特别是在动画或滚动时。建议不在过多元素上同时使用box-shadow,使用滤镜shadow-drop或图片替代也有助于性能优化。
本工具支持最多3层阴影叠加,每层独立控制所有参数。多层阴影用逗号分隔,可以实现更丰富的立体效果,如模拟Material Design的阴影层次。