CSS3 的边框属性可以给创建圆角的盒子，也可以给盒子设置阴影，用图片美化盒子。
border-radius 圆角
border-radius可以给元素设置圆角。
如下，一个div元素：
<div class="box">border-radius可以给元素设置圆角。</div>
我们给它加一点样式，并设置它的border-radius为15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
浏览器中查看效果：
border-radius也可以给它四个角分别设置角度，四个值依次代表左上，右上，右下，左下：
border-radius: 15px 15px 0px 0px;
box-shadow 边框阴影
box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置，可以是负值。
v-shadow 垂直阴影的位置，可以是负值。
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
以上 h-shadow ，v-shadow是必须要设置的，其他的可以根据需要去设置。
我们给上面的div元素添加阴影：
<div class="box"></div>
css样式：
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
浏览器中查看效果：
border-image 图片
border-image 使用图片设置边框。
如下：
<div class="box"></div>
我们先给div元素的边框颜色设置为透明（transparent），然后在使用图片设置边框：
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果：
童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢？这是因为好多浏览器都不支持CSS的新特性，所以写这些专属的前缀是为了兼容各浏览器。
上一篇CSS3文章最后也讲过各浏览器的前缀，童靴们自己去看一下。
当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。
关注小白前端，持续收到文章推送！