前端必知必会-CSS边框图像border-image

---

CSS 边框图像

CSS 边框图像
使用 CSS border-image 属性，您可以设置一个图像作为元素周围的边框。

CSS border-image 属性

CSS border-image 属性允许您指定一个图像来代替元素周围的正常边框。

该属性有三个部分：

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

我们将使用以下图像（称为“border.png”）：

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

示例 2：

border-image：url(border.png) 20% round;

示例 3：

border-image：url(border.png) 30% round;

代码如下：

示例

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

---

总结

本文介绍了CSS边框图像border-image的使用，如有问题欢迎私信和评论