css3边界border – CSS3高级教程

上一章CSS3高级教程请查看：验证css代码

使用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;
}

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