边框(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;
}

提示：圆形选项是重复选项的一种变体，它以使两端连接得很好的方式分布图像块。