css制作阴影

CSS 阴影制作方法

CSS 提供了多种方式为元素添加阴影效果，主要包括 box-shadow 和 text-shadow 属性。

使用 box-shadow 为元素添加阴影

box-shadow 可以为块级元素（如 div、section 等）添加阴影效果。语法如下：

box-shadow: h-offset v-offset blur spread color inset;

• h-offset：水平阴影位置（正值向右，负值向左）。
• v-offset：垂直阴影位置（正值向下，负值向上）。
• blur：模糊距离（可选，值越大越模糊）。
• spread：阴影扩展尺寸（可选，正值扩大，负值缩小）。
• color：阴影颜色（可选，默认为当前文本颜色）。
• inset：内阴影（可选，默认外阴影）。

示例：

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

使用 text-shadow 为文本添加阴影

text-shadow 可以为文本内容添加阴影效果。语法如下：

text-shadow: h-offset v-offset blur color;

• h-offset：水平阴影位置。
• v-offset：垂直阴影位置。
• blur：模糊距离（可选）。
• color：阴影颜色（可选）。

示例：

h1 {
  text-shadow: 2px 2px 4px #000000;
}

多重阴影效果

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

div {
  box-shadow: 
    3px 3px 5px rgba(0, 0, 0, 0.2),
    -3px -3px 5px rgba(255, 255, 255, 0.1);
}

内阴影效果

通过 inset 关键字可以创建内阴影：

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

阴影颜色与透明度

使用 rgba 或 hsla 可以调整阴影的透明度：

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

浏览器兼容性

box-shadow 和 text-shadow 在现代浏览器中支持良好，但在旧版浏览器（如 IE9 以下）可能需要前缀或替代方案。