CSS 边框图片

CSS 中，我们可以使用边框图片（Border Image）来实现更加丰富炫酷的边框效果。边框图片是一张图片，用于替换边框的样式，使得边框更加美观。

使用方法

边框图片可以通过 border-image 属性添加到边框上。该属性接受一个图片 URL、一个九宫格参数以及一个可选的“填充（stretching）”参数：

border-image: url(border.png) 27 27 27 27 stretch;

其中，

• url(border.png) 指定边框图片的路径；
• 27 27 27 27 是九宫格参数，表示图片中用于拉伸的四个边角的大小；
• stretch 表示图片要被拉伸来填充边框。

示例

在下面的示例中，我们为一个 div 元素添加了一个边框图片。

<div class="border-image"></div>

.border-image {
  border: 20px solid transparent;
  border-image: url(https://picsum.photos/id/237/360/240) 30% round;
  height: 200px;
  width: 300px;
}

在上述代码中，我们使用了一个来自 Picsum Photos 的图片来做为边框图片。我们设置了边框宽度为 20px，颜色为透明色；边框图片的 URL 是我们上面提到的图片的链接，九宫格参数设置为 30%，表示图片宽度的 30% 将会被用于拉伸；填充参数 round 表示图片会被重复平铺来填充边框。

效果如下所示：

总结

CSS 边框图片是一个非常实用的特性，它可以用来制作出各种炫酷的边框效果，从而提升页面的整体美观程度。在使用该特性时需要注意图片的大小和九宫格参数的配置，以保证边框效果的良好呈现。