CSS 阴影效果属性

参考资料

1. css样式div居中
2. 层次/关系选择器详细说明以及案例
3. id选择器详细说明以及案例
4. css div阴影效果
5. css中div居中详细说明
6. CSS格式化/压缩有哪些
7. 如何编写CSS代码？
8. 颜色属性详细说明以及案例

CSS 阴影效果属性

1. box-shadow

作用: 为元素添加阴影效果。

属性值:

• none (默认)

• h-offset (水平阴影位置)

• v-offset (垂直阴影位置)

• blur (模糊距离)

• spread (阴影尺寸)

• color (阴影颜色)

• inset (内阴影)

用法:

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

示例:

div {
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

2. text-shadow

作用: 为文本添加阴影效果。

属性值:

• none (默认)

• h-offset (水平阴影位置)

• v-offset (垂直阴影位置)

• blur (模糊距离)

• color (阴影颜色)

用法:

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

示例:

h1 {
  text-shadow: 2px 2px 4px #000000;
}

3. drop-shadow (滤镜)

作用: 为图像或元素添加阴影效果。

属性值:

• none (默认)

• h-offset (水平阴影位置)

• v-offset (垂直阴影位置)

• blur (模糊距离)

• color (阴影颜色)

用法:

filter: drop-shadow(h-offset v-offset blur color);

示例:

img {
  filter: drop-shadow(5px 5px 5px #666);
}

4. 多重阴影

作用: 为元素添加多个阴影效果。

用法:

box-shadow: shadow1, shadow2, ...;
text-shadow: shadow1, shadow2, ...;

示例:

div {
  box-shadow: 3px 3px 5px red, -3px -3px 5px blue;
}

5. 内阴影

作用: 在元素内部添加阴影效果。

用法:

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

示例:

div {
  box-shadow: inset 0 0 10px #000000;
}

6. 模糊与扩展

作用: 控制阴影的模糊程度和大小。

示例:

div {
  box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.5);
}