Box-shadow属性入门

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是扩大半径，相对于原元素多出来的大小程度；数字越大。代表阴影部分也就越大。