本文详细介绍了CSS3中的三个关键样式属性：border-radius用于创建边框圆角，border-image允许使用图片创建边框，box-shadow则用于给元素添加阴影效果。通过实例代码演示了各属性的使用方法和参数含义，包括边框圆角的四个方向设定，border-image的图片切片和拉伸，以及box-shadow的阴影位置、模糊度和内阴影设置。
CSS3 中，针对边框的样式作了一些升级调整，这里主要讲解三个属性：
- border-radius
- border-image
- box-shadow
1、border-radius
在 CSS2 中添加边框圆角是一件很困难的事情，我们需要在每个角落使用不同的图像。但是，在 CSS3 中，我们只需要使用属性 border-radius 就可以创建圆角。
border-radius: 20px; /*所有的角都使用半径为20px的圆角*/
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
margin: 20px;
border: 2px solid;
border-radius: 20px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div><p>border-radius</p></div>
</body>
border-radius 属性其实是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写模式，四个数值的书写顺序是：左上角、右上角、右下角、左下角。
- 当
border-radius只设置一个值，即将该值应用到元素的四个角上。 - 当
border-radius设置两个或三个值时，按照对角线相同原则，如：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
margin: 20px;
border: 2px solid;
border-radius: 20px 50px; /*省略了左下和右下，按照对角线相同的原则，应为 20px 50px 20px 50px*/
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div><p>border-radius</p></div>
</body>
border-radius按照语法的完整写法其实是border-radius:10px 10px 10px 10px / 10px 10px 10px 10px;，前面四个表示圆角的水平半径，后面四个表示圆角的垂直半径。
除了为边框添加圆角，你还可以将 border-radius属性运用到图片上来制作你的圆角图片。
注意：不要以为 border-radius 只可以用 px 单位，也可以用百分比或者 em，但目前的兼容性不太好。
2、border-image
使用属性 border-image ，我们可以使用图片来创建一个边框。语法为：
border-image: source(url) slice width outset repeat;
source:所使用图片的路径。slice:图片边框向内偏移。width:图片边框宽度。outset:边框图像区域超出边框的量。repeat:图像边框是否应该平铺（repeat）、铺满（round）或拉伸（stretch）。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
border: 40px solid;
margin: 50px;
width: 200px;
height: 200px;
padding: 50px;
border-image: url('../img/image.png') 30 30 stretch;
}
</style>
</head>
<body>
<div></div>
</body>
3、box-shadow
属性 box-shadow 用于给盒子添加阴影，语法与 text-shadow 有些相似：
box-shadow: 水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 inset;
与 text-shadow 相比，水平阴影、垂直阴影、模糊阴影的作用和 text-shadow 的对应属性相同，另外 box-shadow 多了阴影尺寸和 inset。
- 水平阴影：规定水平阴影的位置（阴影与盒子的水平偏移，正值向右偏移，负值向左偏移），必选项。
- 垂直阴影：规定垂直阴影的位置（阴影与盒子的垂直偏移，正值向下偏移，负值向上偏移），必选项。
- 模糊阴影：规定模糊的距离，可选项；值越大，模糊半径越大，阴影也就越大越淡。
- 阴影尺寸：阴影尺寸就是阴影外延出去的总长度。
inset：阴影默认是向外发散的，inset 参数的作用就是使外阴影变为内阴影（可以写在参数的第一个和最后一个，其他位置是无效的）。- 阴影颜色：规定阴影颜色，可选项；如不规定该项的值，则使用UA（用户代理）自行选择的颜色。如果想保持跨浏览器的一致性，阴影的颜色就需要明确的被指定为一种。
注：参数的顺序不要乱写。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.shadow1 {
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #eee8cd;
box-shadow: 0 0 0 10px #000;
/*将除阴影尺寸之外的数值都设置为0,观察阴影尺寸的效果*/
}
.shadow2 {
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #eee8cd;
box-shadow: 20px 20px 10px #000;
/*水平阴影和垂直阴影都为正值，阴影在原盒子右下方*/
}
.shadow3 {
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #eee8cd;
box-shadow: -20px -20px 10px #000;
/*水平阴影和垂直阴影都为负值，阴影在原盒子左上方*/
}
.shadow4 {
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #eee8cd;
box-shadow: 0 0 100px #000 inset;
/*除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部*/
}
.shadow5 {
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: #eee8cd;
box-shadow: -40px 0 100px red, /*左边阴影*/
0 -40px 100px #000,/*上边阴影*/
40px 0 100px blue, /*右边阴影*/
0 40px 100px yellow; /*下边阴影*/
/*盒子的多阴影，设置了上下左右四个阴影*/
}
</style>
</head>
<body>
<div class="shadow1">
将除阴影尺寸之外的数值都设置为0，可以看到阴影尺寸就是阴影外延出去的长度，相当于增加了
border 的宽度。需要注意的是，box-shadow 不占据空间，所以阴影尺寸虽然增加了
border 的宽度，但它并不是 border。
</div>
<div class="shadow2">水平阴影和垂直阴影都为正值，阴影在原盒子右下方</div>
<div class="shadow3">水平阴影和垂直阴影都为负值，阴影在原盒子左上方</div>
<div class="shadow4">
除了模糊阴影外的值都设置为 0 ，另外使用参数 inset ，阴影在盒子内部
</div>
<div class="shadow5">盒子的多阴影，设置了上下左右四个阴影</div>
</body>
模糊阴影和阴影尺寸的区别
- 模糊阴影：其值只能是为正值，如果其值为 0 时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
- 阴影尺寸：其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
