css阴影效果属性效果是什么

参考资料

1. css布局格式
2. 层次/关系选择器详细说明以及案例
3. CSS3 阴影
4. Vanta.js 如何与 CSS 过渡结合？
5. css中div居中详细说明
6. css阴影效果怎么设置
7. css div阴影效果
8. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法

CSS阴影效果属性

1. 介绍：
   CSS阴影效果用于为元素添加阴影，增强视觉层次感。主要分为文本阴影和盒子阴影两种类型。

2. 主要属性：

2.1 text-shadow（文本阴影）

• 语法：text-shadow: h-shadow v-shadow blur-radius color;

• 参数：

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

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

• blur-radius：模糊距离（可选）

• color：阴影颜色（可选）

2.2 box-shadow（盒子阴影）

• 语法：box-shadow: h-shadow v-shadow blur-radius spread color inset;

• 参数：

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

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

• blur-radius：模糊距离（可选）

• spread：阴影尺寸（可选）

• color：阴影颜色（可选）

• inset：内部阴影（可选）

3. 用法示例：

3.1 文本阴影示例：
/* 简单阴影 */
h1 {
 text-shadow: 2px 2px #ff0000;
}

/* 模糊阴影 */
h2 {
 text-shadow: 2px 2px 5px #000;
}

/* 多重阴影 */
h3 {
 text-shadow: 0 0 3px #FFF, 0 0 5px #00f;
}

3.2 盒子阴影示例：
/* 基本阴影 */
div {
 box-shadow: 10px 10px 5px #888;
}

/* 内部阴影 */
div {
 box-shadow: inset 0 0 10px #000;
}

/* 多重阴影 */
div {
 box-shadow: 5px 5px blue, 10px 10px red;
}

/* 扩散阴影 */
div {
 box-shadow: 0 0 0 5px #f00;
}

4. 注意事项：

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

• 支持RGBA颜色实现半透明效果

• 阴影不影响文档流布局

• 性能考虑：过度使用阴影可能影响页面性能