参考资料

1. 详细说明：justify-content: flex-start/end
2. * 通配符选择器详细说明以及案例
3. CSS格式化/压缩有哪些
4. 属性选择器详细说明以及案例
5. Vanta.js 如何与 CSS 过渡结合？
6. css div阴影效果
7. 后代选择器详细说明以及案例
8. id选择器详细说明以及案例

CSS 阴影效果设置

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. 阴影性能消耗较大，避免过度使用