box-shadow 用法

阴影 box-shadow

box-shadow是向盒子添加阴影，可以添加一个或者多个。

 

语法：

box-shadow ：X轴偏移量  Y轴偏移量  [ 阴影模糊半径] [阴影扩展半径] [ 阴影颜色][投影方式]

X轴偏移量：必需，水平阴影的位置，允许为负值。

Y轴偏移量：必需，垂直阴影的位置，允许为负值。

阴影模糊半径：可选，模糊距离。

阴影扩展半径：可选，阴影的尺寸。

阴影的颜色：可选，阴影的颜色，省略默认为黑色。

投影方式：可选（设置inset为内阴影方式，如果省略为外阴影方式）

inset 可以写在参数的第一个或者最后一个，其他位置无效。

代码：

设置外阴影：

.box-shadow{

   box-shadow:1px 1px 4px #666666;

}

设置内阴影：

.box-shadow{

  box-shadow:1px 1px 4px #666666 inset;

}

添加多个阴影：

.box-shadow{

  box-shadow:2px 2px 10px green inset,-3px -3px 15px red ;

}