CSS3对元素边框的另一改进是边框阴影。利用阴影可以很简单的实现很炫的阴影按钮等效果，而不使用背景图片。
属性名称：box-shadow
属性值：一系列值得组合
box-shadow语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
w3cschool对其解释如下：
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊距离。 | 测试 |
| spread | 可选。阴影的尺寸。 | 测试 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |
废话不多说，下面的例子用box-shadow和border-radius属性制作了一个简单的圆形阴影按钮：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #ccc;
width: 100px;
height: 100px;
border-radius: 100%;
box-shadow: -4px 0 5px #198dca, 0 -4px 5px #198dca, 0 4px 5px #198dca, 4px 0 5px #198dca;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下图：
如例子里面用到的元素的四边阴影是可以分开设定的，与其他属性不同的是，当只设定一边阴影时将仅显示一边阴影，并不会四边显示。