box-shadow是CSS3新增的一个重要属性,用来定义元素的盒子阴影。
语法规则:
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]
box-shadow属性可以使用一个或多个投影,若使用多个投影时必须使用逗号“,”隔开。
none:默认值,元素没有任何阴影效果。
inset:阴影类型,可选值。若不设置,其默认的投影方式是外阴影;若取其唯一值“inset”,就是给元素设置内阴影。
x-offset:阴影水平偏移量,其值可以是正负值。若取正值,则阴影在元素的右边,反之取负值,阴影在元素的左边。
y-offset:阴影垂直偏移量,其值可以是正负值。若取正值,则阴影在元素的底部,反之取负值,阴影在元素的顶部。
blur-radius:阴影模糊半径,可选参数。其值只能是正值,若取值为“0”时,表示阴影不具有模糊效果,若取值越大,阴影的边缘就越模糊。
spread-radius:阴影扩展半径,可选参数。其值可以是正负值,若取值为正值,则整个阴影都延展扩大,反之取值为负值,则整个阴影都缩小。
color:阴影颜色,可选参数,若不设定任何颜色时,浏览器会取默认色,但哥浏览器默认色不一样,特别是在Webkit内核下的浏览器将无色,也就是透明色,建议不要省略这个参数。
<html lang="en"><head><meta charset="UTF-8"><title>box-shadow设置单边阴影效果</title><style type="text/css">.box-shadow {width: 200px;height: 100px;border-radius: 5px;border: 1px solid #ccc;margin: 20px;}.top {box-shadow: 0 -4px 5px -3px red;}.right {box-shadow: 4px 0 5px -3px green;}.bottom {box-shadow: 0 4px 5px -3px blue;}.left {box-shadow: -4px 0 5px -3px orange;}</style></head><body><div class="box-shadow top"></div><div class="box-shadow right"></div><div class="box-shadow bottom"></div><div class="box-shadow left"></div></body></html>