css3边界border – CSS3高级教程 cssborder|CSS

上一章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; }

【css3边界border – CSS3高级教程】提示：圆形选项是重复选项的变体，它将图像块以一种两端连接良好的方式分布。