CSS 盒阴影生成器

盒阴影语法

CSS box-shadow属性的完整语法如下：

box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;
              

• inset：可选，指定为内阴影
• x-offset：必需，水平偏移量，正值向右，负值向左
• y-offset：必需，垂直偏移量，正值向下，负值向上
• blur-radius：可选，模糊半径，值越大阴影越模糊
• spread-radius：可选，扩展半径，正值扩大阴影，负值缩小
• color：可选，阴影颜色，支持透明度

常见用途

• 为卡片、按钮等元素添加立体感
• 创建悬浮效果（如鼠标悬停时）
• 突出显示活动元素或焦点元素
• 模拟纸张或实体对象的阴影效果
• 使用内阴影创建凹陷或压入效果

多重阴影

可以通过逗号分隔添加多个阴影，按从前到后的顺序应用：

box-shadow: 0 2px 4px rgba(0,0,0,0.2),
            0 8px 16px rgba(0,0,0,0.1);
              

性能考虑

• 过多或过于复杂的阴影可能影响渲染性能
• 对于移动设备，考虑使用更简单的阴影
• 大模糊半径的阴影计算成本更高
• 可以使用transform: translateZ(0)启用GPU加速

浏览器兼容性

box-shadow在所有现代浏览器中都得到良好支持。IE9+完全支持此属性，而IE8及更早版本不支持。

对于需要支持旧浏览器的情况，可以考虑使用图像或其他替代方法来创建阴影效果。