参考资料

1. CSS网格详细说明以及案例
2. CSS阴影透明度设置
3. css阴影效果代码
4. css div居中代码
5. div居中样式
6. Flexbox 布局有哪些高级用法？
7. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
8. id选择器详细说明以及案例

css3阴影效果

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. 内阴影不会影响外部布局