box-shadow是css3中的一个属性,它可以向框添加一个或多个阴影。首先我们来看它的语法:
box-shadow属性接收一个由5个参数组成的值,每个值的意思如下:
- h-shadow: 水平阴影的位置
- v-shadow:垂直阴影的位置
- blur:模糊距离
- spread:阴影的尺寸
- color:阴影的颜色
接下来我们通过几个实例来加深对这些值的理解:
- h-shadow:这个值指定了阴影的水平偏移量。即在x轴上阴影的位置。如果是正数阴影会出现在元素的右边,如果是负值阴影出现在元素的左边。
正值:
负值:
- v-shadow:这个值指定了阴影的垂直偏移量。即在y轴上阴影的位置。如果是正值阴影会出现在元素的上边,如果是负值阴影会出现在元素的下边。
正值:
负值:
- blur:这个值代表阴影的模糊半径,如果是“0”意味着阴影是完全实心的,没有任何模糊效果。该值越大,实心度越小,阴影越朦胧和模糊,该值不支持负数。
值为0:
值不为0:
- spread这个值代表着阴影的尺寸。这个值可以被看作是从元素到阴影的距离。如果正值会在元素的四个方向延伸阴影。负值会使阴影变得比元素本身尺寸还要小。默认值“0”会让阴影变得得和元素的大小一样。
- color:这个值是指定阴影的颜色