CSS3 边框
使用 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;
}提示： round 选项是 repeat 选项的变体，它以使末端连接良好的方式分布图像块。
Advertisements