css阴影效果属性

参考资料

1. CSS响应式详细说明以及案例
2. 伪元素选择器详细说明以及案例
3. 有没有现成的Vanta.js与CSS过渡模板？
4. css布局格式
5. Vanta.js 如何与 CSS 过渡结合？
6. CSS有哪些常用的选择器？
7. CSS 阴影效果属性
8. Flex布局如何优化页面加载速度？

CSS 阴影效果属性

1. box-shadow 属性

• 用于为元素添加阴影效果

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

• 参数：

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

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

• blur：模糊距离（可选）

• spread：阴影尺寸（可选）

• color：阴影颜色（可选）

• inset：将外部阴影改为内部阴影（可选）

2. text-shadow 属性

• 用于为文本添加阴影效果

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

• 参数：

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

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

• blur：模糊距离（可选）

• color：阴影颜色（可选）

用法示例：

1. box-shadow 示例：
   /* 基本阴影 */
   .box {
    box-shadow: 5px 5px 10px #888;
   }

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

/* 多重阴影 */
.box-multi {
 box-shadow: 5px 5px 5px #f00, -5px -5px 5px #0f0;
}

2. text-shadow 示例：
   /* 基本文本阴影 */
   .text {
    text-shadow: 2px 2px 4px #000;
   }

/* 模糊文本阴影 */
.text-blur {
 text-shadow: 0 0 8px #f00;
}

/* 多重文本阴影 */
.text-multi {
 text-shadow: 1px 1px 2px #000, 0 0 1em #00f;
}