参考资料

1. css中div居中详细说明
2. css中div居中
3. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
4. 如何优化Flexbox布局的性能？
5. align-items: flex-start/end详细说明
6. 哪种布局方式更适合移动端？
7. CSS 阴影边框设置
8. 后代选择器详细说明以及案例

CSS 阴影效果设置

box-shadow 属性

基本语法

box-shadow: h-offset v-offset blur spread color inset;

参数说明

• h-offset：水平阴影位置（必需）

• v-offset：垂直阴影位置（必需）

• blur：模糊距离（可选）

• spread：阴影尺寸（可选）

• color：阴影颜色（可选）

• inset：内阴影（可选）

text-shadow 属性

基本语法

text-shadow: h-offset v-offset blur color;

参数说明

• h-offset：水平阴影位置（必需）

• v-offset：垂直阴影位置（必需）

• blur：模糊距离（可选）

• color：阴影颜色（可选）

用法示例

1. 基本阴影

.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

2. 内阴影

.box {
  box-shadow: inset 0 0 10px #000;
}

3. 多重阴影

.box {
  box-shadow: 
    3px 3px 5px rgba(0,0,0,0.2),
    -1px -1px 2px rgba(255,255,255,0.5);
}

4. 文字阴影

.text {
  text-shadow: 2px 2px 4px #666;
}

5. 模糊效果更强的阴影

.box {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

6. 扩散阴影

.box {
  box-shadow: 0 0 0 5px rgba(255,0,0,0.5);
}

注意事项

1. 阴影不会影响盒模型的布局

2. 可以同时应用多个阴影，用逗号分隔

3. 使用rgba颜色可以设置透明度

4. 阴影性能消耗较大，避免过度使用