css阴影效果怎么设置
2025-04-23
37
参考资料
css阴影效果怎么设置
CSS阴影效果主要通过box-shadow和text-shadow属性实现。
1. box-shadow（盒子阴影）
属性语法：
box-shadow: h-offset v-offset blur spread color inset;
参数说明：
h-offset：水平阴影位置（必需）v-offset：垂直阴影位置（必需）blur：模糊距离（可选）spread：阴影尺寸（可选）color：阴影颜色（可选）inset：内阴影（可选）
示例：
/* 基础阴影 */
.box1 {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
/* 内阴影 */
.box2 {
box-shadow: inset 0 0 8px #000;
}
/* 多重阴影 */
.box3 {
box-shadow:
3px 3px 5px red,
-3px -3px 5px blue;
}2. text-shadow（文字阴影）
属性语法：
text-shadow: h-offset v-offset blur color;
参数说明：
h-offset：水平阴影位置（必需）v-offset：垂直阴影位置（必需）blur：模糊距离（可选）color：阴影颜色（可选）
示例：
/* 基础文字阴影 */
.text1 {
text-shadow: 2px 2px 4px #000;
}
/* 多重文字阴影 */
.text2 {
text-shadow:
1px 1px 1px red,
-1px -1px 1px blue;
}
/* 发光效果 */
.text3 {
text-shadow: 0 0 8px yellow;
}3. 浏览器兼容性
所有现代浏览器都支持这两个属性：
Chrome 10+
Firefox 4+
Safari 5.1+
Opera 10.5+
IE 9+（box-shadow）
IE 10+（text-shadow）
4. 注意事项
阴影性能：过度使用模糊效果可能影响页面性能
响应式设计：在小屏幕上可能需要减小阴影尺寸
可访问性：确保文字阴影不影响文字可读性
