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

提示： 圆形选项是重复选项的变体，它以这样的方式分布图像切片，使得端部连接良好。