box-shadow [bɑks] - [ˈʃædoʊ]
英文示意:
box:盒,包厢
shadow:阴影,渐变
定义:
box-shadow: none | <shadow> [,<shadow>]*
<shadow>:inset? && <length>{2,4} && color
- inset:内阴影,默认为外阴影
- <length>--1:阴影的水平偏移量,正值阴影在右侧,负值阴影在左侧,必填
- <length>--2:阴影的垂直偏移量,正值阴影在底部,负值阴影在顶部,必填
- <length>--3:阴影的模糊距离,必须为正值,值越大,阴影边缘越模糊,非必填
- <length>--4:阴影的外延长度值,非必填
- color:阴影颜色
注:
- <length>必须为具体的长度单位值,不可使用百分比
- 可以为一个元素指定多个阴影
- 阴影的偏移基准值为元素计算宽高,内边距,边框后的值
示例:
1).配合border-radius实现圆形阴影
![](https://images2017.cnblogs.com/blog/632130/201708/632130-20170821152844324-272673633.png)
box-shadow:20px 10px 5px 0px grey;
border-radius:50%
2).多重阴影实现多彩边框(定义多个阴影时,先定义的阴影在后定义的阴影的上方)
![](https://images2017.cnblogs.com/blog/632130/201708/632130-20170821152857261-1007238506.png)
box-shadow: 10px 0 #77ff8c,
-10px 0 #4e71ff,
0 10px #ff62d3,
0 -10px #ffe563,
0 0 0 10px #9b4dbb;
3).配合transform和transition实现弹出效果
![](https://images2017.cnblogs.com/blog/632130/201708/632130-20170821152910324-621384425.gif)
.popup { transform: scale(1); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; } .popup:hover { transform: scale(1.3); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; }