CSS阴影边框

参考资料

1. display: flex/inline-flex示例
2. 伪元素选择器详细说明以及案例
3. css阴影效果属性
4. 层次/关系选择器详细说明以及案例
5. 哪种布局方式更适合移动端？
6. 如何用添加产品图片和描述？
7. flex-wrap: wrap/nowrap详细说明
8. 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;
}