本篇，我们要讲的是CSS3中经常被使用来开发页面模糊阴影效果的box-shadow属性和text-shadow属性。
在前端开发过程中，我们常常会看见这种效果：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Shadow</title>
- <style>
- .box {
- height: 100px;
- width: 200px;
- border: 1px ridge silver;
- }
- .shadow1 {
- box-shadow: 4px 4px 6px 1px gray;
- }
- </style>
- </head>
- <body>
- <div class="box shadow1"></div>
- </body>
- </html>
这种阴影效果就是使用CSS3box-shadow属性实现。
box-shadow
box-shadow属性向框元素添加一个或多个阴影效果。
- 语法：
box-shadow: [inset] x-offset y-offset [blur] [spread] [color]; - 属性
| 属性 | 说明 |
|---|---|
| inset | 可选，将默认的外阴影设置为内阴影。 |
| x-offset | 必需，水平方向阴影偏移量，可为负值。 |
| y-offset | 必需，垂直方向上阴影偏移量，可为负值。 |
| blur | 可选 ，阴影模糊半径，不可为负值。 |
| spread | 可选，阴影延展半径，可为负值。 |
| color | 可选，阴影颜色 |
阴影偏移量
box-shadow阴影偏移量可正可负，为正值时则向右或下偏移，如下：
- 正水平偏移量阴影
- 负水平偏移量阴影
- 正垂直偏移量阴影
- 负垂直偏移量阴影
模糊半径
- 正模糊半径阴影
- box-shadow不支持负模糊半径
延展半径
- 正延展半径
正延展半径向外延展阴影半径
- 负延展半径
负延展半径向内收缩阴影半径
text-shadow
text-shadow 属性向文本设置阴影。
- 语法
text-shadow: x-offset y-offset blur color; - 属性
| 属性 | 说明 |
|---|---|
| x-offset | 必需，水平方向阴影偏移量，可为负值。 |
| y-offset | 必需，垂直方向上阴影偏移量，可为负值。 |
| blur | 可选 ，阴影模糊半径，不可为负值。 |
| color | 可选，阴影颜色 |
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索属性
， shadow
， 模糊
， 阴影
， 效果
， 偏移
， 偏移量
box-shadow
css3 text shadow、css3 shadow 底部阴影、css3 box shadow、css3 box shadow参数、css3 box shadow 发光，以便于您获取更多的相关知识。