参考资料

1. display: flex/inline-flex示例
2. 哪种布局方式更适合移动端？
3. 多重选择器详细说明以及案例
4. css中div居中详细说明
5. 如何避免 CSS 过渡动画卡顿？
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. 阴影性能消耗较大，避免过度使用

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。