最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：
1.h-shadow
h-shadow代表的是阴影的水平位置偏移量，可以是正负值
即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边
- h-shadow为正值
box-shadow: 10px 0px 10px 0px red;
image.png
- h-shadow为负值
box-shadow: -10px 0px 10px 0px red;
image.png
2.v-shadow
v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值
当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面
- v-shadow为正值
bbox-shadow: 0px 10px 10px 0px red;
image.png
- v-shadow为负值
box-shadow: 0px -10px 10px 0px red;
image.png
3.blur
blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和
- blur 的值为0
box-shadow: 0px 0px 0px 0px pink;
image.png
- blur 的值为30
box-shadow: 0px 0px 30px 0px pink;
image.png
- blur 的值为50
box-shadow: 0px 0px 50px 0px pink;
image.png
4.spread
spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。
- spread 的值为0
box-shadow: 0px 0px 10px 0px red;
image.png
- spread 的值为正值
box-shadow: 0px 0px 10px 10px red;
image.png
- spread 的值为负值
box-shadow: 0px 10px 10px -10px red;
image.png
5.color
color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色
- color未设置值
box-shadow: 10px 10px 10px 10px;
image.png
- color 用颜色单词表示
box-shadow: 10px 10px 10px 10px pink;
image.png
- color用十六进制表示
box-shadow: 10px 10px 10px 10px #faa;
image.png
- color 用rgb表示
box-shadow: 10px 10px 10px 10px rgb(150 10 100);
image.png
- color 用rgba表示
box-shadow: 10px 10px 10px 10px rgba(0,0,255,0.3);
image.png
6.inset
默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影
- 不加inset的情况
box-shadow: 10px 10px 10px 10px red;
image.png
- 加inset的情况
box-shadow: 10px 10px 10px 10px red inset;
image.png
7.通过box-shadow实现一些有趣的效果
- 弹出效果
.box {
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 3px;
background-color: #ccc;
transform: scale(1);
box-shadow: 0px 0px 10px 5px #9c27b0;
transition: box-shadow 0.5s, transform 0.5s;
}
.box:hover {
transform: scale(1.3);
box-shadow: 0px 0px 20px 10px #9c27b0;
transition: box-shadow 1s;
}
1.gif
附：
属性定义及使用说明：
box-shadow属性可以设置一个或多个下拉阴影的框。
| 默认值： | none |
|---|---|
| 继承： | no |
| 版本： | CSS3 |
| JavaScript语法： | object.style.boxShadow="10px 10px 5px #888888" |
兼容性：
image.png
网友评论