css制作阴影

使用 box-shadow 属性

box-shadow 是 CSS 中用于创建阴影的核心属性。其语法如下：

box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩展半径] [颜色] [inset];

• 水平偏移：阴影水平方向的距离（正值向右，负值向左）。
• 垂直偏移：阴影垂直方向的距离（正值向下，负值向上）。
• 模糊半径：阴影的模糊程度（值越大越模糊，0 表示无模糊）。
• 扩展半径：阴影的扩展大小（正值扩大，负值缩小）。
• 颜色：阴影颜色（支持 HEX、RGB、RGBA 等格式）。
• inset：可选关键字，表示内阴影（默认是外阴影）。

示例：

div {
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
}

多阴影效果

通过逗号分隔，可以为一个元素添加多个阴影：

div {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

内阴影效果

使用 inset 关键字实现内阴影，适合按钮或卡片凹陷效果：

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

文字阴影 (text-shadow)

为文字添加阴影效果，语法类似 box-shadow，但不支持 inset 和扩展半径：

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

阴影性能优化

• 避免过度使用模糊半径（如超过 20px），可能影响渲染性能。
• 使用 rgba 或 hsla 颜色定义透明度，减少阴影的突兀感。

浏览器兼容性

box-shadow 和 text-shadow 均支持现代浏览器（Chrome、Firefox、Safari、Edge）。如需支持旧版 IE，需使用滤镜（不推荐）或降级方案。