CSS3box-shadow与text-shadow

box-shadow

给元素块添加周边阴影效果

基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

属性值：

• 阴影类型：此参数可选，如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影
• X-offset:阴影水平偏移量，如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边
• Y-offset:阴影垂直偏移量，如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部
• 阴影模糊半径：此参数可选，但其值只能是为正值，其值越大阴影的边缘就越模糊；如果其值为0时，表示阴影不具有模糊效果
• 阴影扩展半径：此参数可选，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
• 阴影颜色：此参数可选，如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致

兼容性写法：

.box-shadow{  
         //Firefox4.0-  
         -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
         //Safariand Google chrome10.0-  
         -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
         //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9  
         box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;  
}  

text-shadow

向文本设置阴影

基础语法是{text-shadow: h-shadow v-shadow blur color;}

对象选择器{text-shadow:水平阴影位置 垂直阴影位置 阴影模糊半径 阴影颜色;}

属性值：

• h-shadow:阴影水平偏移量，如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边
• v-shadow:阴影垂直偏移量，如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部
• 阴影模糊半径：此参数可选，但其值只能是为正值，其值越大阴影的边缘就越模糊；如果其值为0时，表示阴影不具有模糊效果
• 阴影颜色：此参数可选