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 以下）可能需要前缀或替代方案。
