css3 shadow使用

CSS3阴影可以让我们很简答的设置文本或盒子的阴影。CSS提供了两个CSS属性，text-shadow和box-shadow,下面详细说明下：

1.text-shadow 文本阴影

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
/*
h-shadow : 水平阴影的位置（必须）
v-shadow : 垂直阴影的位置（可选）
blur-radius: 阴影模糊半径（可选）
color : 阴影颜色值（可选）
*/

2.box-shadow 盒子阴影

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

参数和文本阴影类似，spread为阴影大小，一般不适用，inset 设置阴影位置，是内阴影还是默认外阴影。

css3阴影允许设置多个，中间用逗号分隔。
技巧：设置盒子阴影时，适当使用after,before伪类，可以实现更漂亮的效果，最后给个简单的例子：

#boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}
#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; 
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                
    width: 70%; 
    left: 15%; 
    height: 100px;
    bottom: 0;
}

附上效果图

text-shadow 和box-shadow 浏览器支持情况