css3阴影效果

参考资料

1. CSS阴影边框
2. 多重选择器详细说明以及案例
3. Flexbox布局有哪些常见的误区？
4. css颜色属性详细说明以及案例
5. 详细说明：justify-content: flex-start/end
6. 如何用Flex布局实现导航栏？
7. display: flex/inline-flex示例
8. 有没有推荐的 CSS 过渡动画库？

CSS3 阴影效果

一、阴影类型

1. 文字阴影 (text-shadow)

2. 盒子阴影 (box-shadow)

二、text-shadow 属性
语法：text-shadow: h-shadow v-shadow blur-radius color;

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

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

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

• color: 阴影颜色（可选）

三、box-shadow 属性
语法：box-shadow: h-shadow v-shadow blur-radius spread color inset;

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

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

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

• spread: 阴影尺寸（可选）

• color: 阴影颜色（可选）

• inset: 内阴影（可选）

四、text-shadow 示例

1. 基本阴影：
   text-shadow: 2px 2px #ff0000;

2. 模糊阴影：
   text-shadow: 2px 2px 5px #ff0000;

3. 多重阴影：
   text-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #fff;

五、box-shadow 示例

1. 基本阴影：
   box-shadow: 10px 10px #888888;

2. 模糊阴影：
   box-shadow: 10px 10px 5px #888888;

3. 内阴影：
   box-shadow: inset 0 0 10px #000000;

4. 多重阴影：
   box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;

六、浏览器兼容性

• 所有现代浏览器都支持

• IE9+ 支持 box-shadow

• IE10+ 支持 text-shadow

七、注意事项

1. 负值会使阴影出现在元素另一侧

2. 模糊半径越大，阴影越模糊

3. 可以创建多个阴影效果

4. 内阴影不会影响外部布局