CSS 边框图像

使用 CSS border-image 属性，可以使用图像设置边框。

边框图像原理示意图：

CSS `border-image` 属性

border-image 属性是 border-image-source ， border-image-slice ， border-image-width ， border-image-outset 和 border-image-repeat 4 个属性的简写属性。

CSS border-image 属性值分为三部分：

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