盒子阴影
为了知道什么是盒子阴影,观看如下效果
这里选取了小米的做法,由于设置阴影的颜色比较淡,所以可能比较难看出来。
用以设置盒子阴影的属性是box-shadow
,它的值比较多,需要设置的值如下,
- 水平阴影
- 垂直阴影
- 模糊距离(虚实)
- 阴影尺寸(影子大小)
- 阴影颜色
- 内/外阴影
其中水平阴影h-shadow
和垂直阴影v-shadow
是必须设置的。
为了观看设置这些值的效果,我们首先创建一个盒子
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 100px auto;
为盒子添加阴影
box-shadow: 1px 1px 1px 1px red;
水平阴影大小的影响
垂直阴影大小的影响
模糊距离大小的影响
阴影尺寸大小的影响
小米的设置如下,如果觉得可以就直接用这个了,不用自己去想
box-shadow: 0 15px 30px rgba(0,0,0,0.1);