文章内容
![CSS怎么实现阴影效果插图 CSS怎么实现阴影效果插图](https://static.ntan520.com/blog-media/2022/06/30e00de8bfa14dbe04ade1d4d06347ef.jpg?x-oss-process=style/watermark)
一、CSS实现阴影效果的方法
- 1、使用text-shadow属性,可以设置带阴影的文本,实现文字阴影效果;
- 2、使用box-shadow属性,可以将阴影应用于文本框,实现边框阴影效果。
二、方法1:使用text-shadow属性实现文字阴影效果
text-shadow属性用于设置带阴影的文本;可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。
1、语法
1 | text-shadow : h-shadow v-shadow blur color; |
2、属性值
- h-shadow:设置水平阴影的位置,允许负值。
- v-shadow:设置垂直阴影的位置,允许负值。
- blur:设置模糊的距离。
- color:设置阴影的颜色。
3、示例
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <! DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >css设置文本阴影效果</ title > < style > h1 { color: red; text-shadow: 3px 5px 5px #656B79; } </ style > </ head > < body > < h1 >文本阴影!</ h1 > </ body > </ html > |
4、效果图
![CSS怎么实现阴影效果插图2 CSS怎么实现阴影效果插图2](https://static.ntan520.com/blog-media/2022/06/ced4941907fdc3c960ac081fa74dc6e9.png?x-oss-process=style/watermark)
三、方法2:使用box-shadow属性实现边框阴影效果
box-shadow属性可以将阴影应用于文本框,可设置中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。
1、语法
1 | box-shadow : h-shadow v-shadow blur spread color inset ; |
2、属性值
- h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
- v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
- blur:设置模糊距离;可选值,可省略。
- spread:设置阴影的大小;可选值,可省略。
- color:设置阴影的颜色;可选值,可省略。
- inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。
3、示例
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | < head > < meta charset = "UTF-8" > < title >css设置边框阴影效果</ title > < style > div{ width:300px; height:100px; background-color:red; box-shadow: 10px 10px 5px #888888; } </ style > </ head > < body > < div >边框阴影!</ div > </ body > |
4、效果图
![CSS怎么实现阴影效果插图4 CSS怎么实现阴影效果插图4](https://static.ntan520.com/blog-media/2022/06/bb2e09b0d331f545fa15b2b0ccf6740a.png?x-oss-process=style/watermark)