CSS阴影生成器
实时预览创建CSS box-shadow。
缩4px
抵消4px
模糊12px
传播0px
不透明度15%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);CSS中的box-shadow是什么？
CSS的box-shadow属性可以为任何HTML元素添加阴影。它是Web设计中最常用的工具之一，用于创建深度、层次和视觉层级。适当的阴影让元素看起来像“浮”在页面上方。
语法包括：水平偏移（X）、垂直偏移（Y）、模糊半径（blur）、扩展半径（spread）、颜色，以及可选的“inset”用于创建内阴影。你可以用逗号分隔组合多个阴影。
常见问题
什么是inset属性？
inset将外部阴影转换为内部阴影。适用于创建深度效果、凹陷的文本框或按下状态的按钮。
阴影会影响性能吗？
简单的阴影影响很小。但在许多元素上使用模糊值很高的阴影可能会影响低端设备的性能。建议适度使用。
可以使用多个阴影吗？
可以，用逗号分隔：box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05)。这能创建更逼真、更精致的效果。
想了解更多？ 阅读我们的完整指南 →