CSS3 边框(Border)
使用CSS3，可以将图像应用于元素的边框上。
使用CSS3边框
CSS3提供了两个新属性，用于以更加优雅的方式对元素的边框进行样式设置- border-image用于将图像添加到边框的border-radius属性，以及用于在不使用任何图像的情况下制作圆角的属性。
下一节将向您介绍CSS3的这些新边框属性，有关其他与边框相关的属性，请查看CSS边框教程。
创建CSS3圆角
该border-radius属性可用于创建圆角。此属性通常定义外边界边缘的角的形状。在CSS3之前，切片图像用于创建相当麻烦的圆角。
.box {
width: 300px;
height: 150px;
background: #ffb6c1;
border: 2px solid #f08080;
border-radius: 20px;
}测试看看‹/›添加CSS3边框图像
border-image属性允许您指定图像以用作元素的边框。
边框的设计是从border-image源URL中指定的图像的侧面和角落创建的。可以以各种方式对边界图像进行切片，重复，缩放和拉伸以适合边界图像区域的大小。
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
-webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
-o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
border-image: url("border.png") 30 30 round;
}测试看看‹/›提示：圆形选项是重复选项的一种变体，它以使两端连接得很好的方式分布图像块。