CSS阴影边框
2025-04-23
32
参考资料
CSS阴影边框
CSS阴影边框
1. 简介
CSS阴影边框用于为元素添加阴影效果，增强视觉层次感。主要通过box-shadow属性实现。
2. 属性box-shadow属性语法：
box-shadow: h-offset v-offset blur spread color inset;
h-offset：水平阴影偏移（必需）
v-offset：垂直阴影偏移（必需）
blur：模糊距离（可选）
spread：阴影扩展（可选）
color：阴影颜色（可选）
inset：内阴影（可选）
3. 用法
外阴影（默认）：
box-shadow: 5px 5px 10px #888;内阴影：
box-shadow: inset 0 0 5px #000;多重阴影：用逗号分隔多个阴影值
4. 示例
/* 基本外阴影 */
.shadow1 {
box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
/* 内阴影 */
.shadow2 {
box-shadow: inset 0 0 10px #000;
}
/* 多重阴影 */
.shadow3 {
box-shadow:
0 0 5px red,
5px 5px 10px blue;
}
/* 扩展阴影 */
.shadow4 {
box-shadow: 0 0 0 5px #f00;
} 