CSS3之文字阴影、盒阴影

一、文字阴影

 text-shadow: 1px 1px 1px #cccccc; 

阴影值的速记规则永远是先向右再向下。因此，第一个值指的是右侧阴影的大小，

第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全

消失的距离），最后一个值是阴影颜色。

左上方阴影（使用负值即可）：

 text-shadow: -4px -4px 0px #dad7d7; 

制作浮雕文字阴影效果：

 text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75); 

 

多重文字阴影：

 text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7; 

 

 

二、盒阴影

 box-shadow: 0px 3px 5px #444444; 

参数依次：水平偏移距离、垂直偏移距离、模糊半径，以及阴影颜色（与文字阴影类似）

但是，盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如：

#content{
-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;
}

三、内阴影

box-shadow 属性可以用来制作内阴影——出现在元素内部，而不是外部。

（内阴影可用来制作光晕效果）

 box-shadow:inset 0 0 40px #000000; 

下面我们给body添加内阴影：

body {
　　-moz-box-shadow:inset 0 0 30px #000000;
　　-webkit-box-shadow:inset 0 0 30px #000000;
　　box-shadow:inset 0 0 30px #000000;
}

四、多重阴影

 body{  box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1); }