CSS阴影样式box-shadow

使用 CSS3 box-shadow 属性，你可以给任何元素制作"阴影"。
box-shadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是0。

<stylet>
  .sky{
       width:100px;
       height:100px;
       border:1px solid black;
       box-shadow:20px 30px 1 3px red,inset 2px 3px -2 2px blue;
  }
</style>
 
<div class="sky"></div>

box-shadow 的五个值对应数据分别为
第一个值 X轴 表示阴影对元素本身左右的偏移，正数向右偏移 负数向左偏移
第二个值 Y轴 表示阴影对元素本身上下的偏移，正数向下偏移 负数向上偏移
第三个值 阴影的模糊程度大小，越大模糊程度越大
第四个值 阴影较原阴影变大缩小的大小 正数变大多少像素 负数缩小多少像素
第五个值 阴影的颜色

没有关键字 inset 设置的为外阴影，有inset关键字为内阴影