css3阴影效果

参考资料

1. 属性选择器详细说明以及案例
2. Flex布局在动画制作中的应用？
3. 伪类选择器详细说明以及案例
4. css实现阴影效果
5. 动画属性详细说明以及案例
6. 有没有推荐的 CSS 过渡动画库？
7. css阴影效果怎么设置
8. 多重选择器详细说明以及案例

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。