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>
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
