CSS 边框图片

通过CSSborder-image属性，您可以设置用作元素周围边框的图片。

CSS border-image 属性

CSSborder-image属性允许您指定要使用的图片，而不是元素周围的正常边框。

该房产分为三部分：

用作边框的图片
在哪里切片图片
定义中间部分是否应重复或拉伸

我们将使用以下图片（称为"border.png"）：

Border

这个border-image属性获取图片并将其切成九个部分，就像井字棋盘一样。然后，它将角放在角上，并根据您的指定重复或拉伸中间部分。

笔记：为了border-image要工作，该元素还需要border属性设置！

在这里，重复图片的中间部分以创建边框：

图片作为边框！

这是代码：

示例

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}

亲自试一试 »

在这里，图片的中间部分被拉伸以创建边框：

图片作为边框！

这是代码：

示例

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}

亲自试一试 »

提示：这个border-image属性实际上是属性的简写border-image-source,border-image-slice,border-image-width,border-image-outset和border-image-repeat特性。

CSS border-image - 不同的切片值

不同的切片值完全改变了边框的外观：

示例1：

border-image: url(border.png) 50 轮；

示例2：

边框图片：url(border.png) 20% 圆形；

示例3：

边框图片：url(border.png) 30% 圆形；

这是代码：

示例

#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}

亲自试一试 »