CSS3 盒子阴影box-shadow
使用box-shadow属性可以向框添加一个或多个阴影，语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow属性是由逗号分隔的阴影列表，每个阴影由2〜4个长度值、可选的颜色值、可选的inset关键词来规定，省略长度的值是0。
box-shadow属性的值包含了以下几个：
•h-shadow：必需，水平阴影的位置，允许负值。
•v-shadow：必需，垂直阴影的位置，允许负值。
•blur：可选，模糊距离。
•spread：可选：阴影的尺寸。
•color：可选，阴影的颜色。
•inset：可选，将外部阴影(outset)改为内部阴影。
可以结合圆角边框按钮制作一个炫酷的按钮。当然，这个按钮是之前的按钮的升级版。
【例题】使用box-shadow属性
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #ccc;
}
div{
width: 200px;
height: 50px;
margin:30px auto;
font-size: 30px;
line-height: 45px;
text-align: center;
color:#fff;
border:5px solid #fff;
border-radius: 10px;
background: #f46;
cursor:pointer;
}
div:hover{
box-shadow: 0 10px 40px 5px #f46;
}
</style>
</head>
<body>
<div>button</div>
</body>
</html>
湘公网安备:43011102000856号 
点击加载更多评论>>