css阴影效果属性效果是什么
参考资料
css阴影效果属性效果是什么
CSS阴影效果属性
介绍：
CSS阴影效果用于为元素添加阴影，增强视觉层次感。主要分为文本阴影和盒子阴影两种类型。主要属性：
2.1 text-shadow（文本阴影）
语法：text-shadow: h-shadow v-shadow blur-radius color;
参数：
h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置（必需）
blur-radius：模糊距离（可选）
color：阴影颜色（可选）
2.2 box-shadow（盒子阴影）
语法：box-shadow: h-shadow v-shadow blur-radius spread color inset;
参数：
h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置（必需）
blur-radius：模糊距离（可选）
spread：阴影尺寸（可选）
color：阴影颜色（可选）
inset：内部阴影（可选）
用法示例：
3.1 文本阴影示例：
/* 简单阴影 */
h1 {
text-shadow: 2px 2px #ff0000;
}
/* 模糊阴影 */
h2 {
text-shadow: 2px 2px 5px #000;
}
/* 多重阴影 */
h3 {
text-shadow: 0 0 3px #FFF, 0 0 5px #00f;
}
3.2 盒子阴影示例：
/* 基本阴影 */
div {
box-shadow: 10px 10px 5px #888;
}
/* 内部阴影 */
div {
box-shadow: inset 0 0 10px #000;
}
/* 多重阴影 */
div {
box-shadow: 5px 5px blue, 10px 10px red;
}
/* 扩散阴影 */
div {
box-shadow: 0 0 0 5px #f00;
}
注意事项：
可以同时应用多个阴影，用逗号分隔
支持RGBA颜色实现半透明效果
阴影不影响文档流布局
性能考虑：过度使用阴影可能影响页面性能
