CSS3的box-shadow(盒子阴影)是给盒子添加一个或者多个阴影的属性。
浏览器支持:
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法:
Box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
案例1:
当水平阴影的位置(h-shadow)为正值时,阴影向左;相反,负值向右;数值越大移动的距离越大。
当垂直阴影的位置(v-shadow)为正值时,阴影向下;相反,负值向上;数值越大移动的距离越大。
模糊距离(blur)的数值越大,越模糊。
案例2:
我们可以用box-shadow属性运用在一些画面效果上,比如:做一个月球图片。
第一步:先设置一个box作为月球球面。
第二步:在box后添加一个元素,设置成圆形,并且相对于box进行定位。
那么所看到的月球球面上这么多圆形是怎么来的呢?
其实就是.box:after(原元素)的阴影。
200px 100px 这两个参数是相对于原元素进行定位,进行的位置偏移;
参数0设置的是模糊距离(blur) ,0代表着不模糊;
参数20px是扩大半径,相对于原元素多出来的大小程度;数字越大。代表阴影部分也就越大。