玩转 CSS Border-Image

[verymuch]

篇外话： 感觉非常对不起我为数不多来之不易的粉丝们，之前列的陪读计划，因为工作原因被生生的摧残掉了。你要问为什么的话？那就是太忙呗，忙到没空写文章的那种。不过“广大”粉丝们放心，歪马已经把自己想象成一只小毛驴，努力追着前面的胡萝卜往前赶了。

😂 尴尬的是本文也并不是陪读系列文章，而是歪马在进行第五章《漂亮的盒子》时，有感而发。

读到书中介绍border-radius的内容时，提到了传说中的九宫格技术，其相关介绍只有可怜的不到一页。九宫格技术所使用的 CSS 属性就是我们今天的主角border-image。虽然这一技术确如书中所说，很少被使用了。但是歪马突然想起自己曾经为了实现某个效果折腾了很久，而这刚好适合用border-image来实现。

本文将会借助这一效果先给大家展示一下border-image的使用效果，总结并建议在哪些地方可以使用border-image，最后再为想要动手一试的你们快速讲解一下相关的语法。

一、效果：如何实现一个切角的圆角矩形

很久很久以前，歪马收到下面这样一份设计图(局部图)。

请你一定动动手指，放大了仔细看。这四个圆角矩形切掉了一个角，形成了一个不规则的图形，不规则图形有一个发光的 border，border 两侧均有一定的模糊。

这时候你看会说了，这还不简单，切四张图，直接当背景不就行了。但是这个地方还有个额外的要求就是每一个矩形的尺寸并不固定。如果我们简单的用背景来实现的话，不同尺寸时图片就会变形。这显然不是牛逼的我们所追求的。

笔者当时为了灵活，使用了一些极其麻烦的方式实现了，并且最后还有一定的限制。这其中的麻烦，都能再写一篇文章。所以这里我们就不说了，说出来还丢人。

前天晚上读到九宫格技术时，我突然灵光一现，当年我实现这个效果的时候为什么不用九宫格呢？是我不知道吗？不，我是知道的。那我为什么不用呢？其实是因为我不知道九宫格除了常规用法讲解时提到的那些我压根不会用的用法外还有哪些使用场景。

现在我可以跟大家说border-image特别适合用于类似的四个边角独特，中间区域重复的场景。一般大屏类的设计可能会有很多的特殊块，其中有一些就适合用border-image来实现。当然常规的画框型也是适合用九宫格的。

说了这么多，我们还是一起来看下如何实现上面的效果吧，以右下角是切角的圆角矩形为例。

因为笔者素材原因，背景只能用深蓝色。在有设计师的情况下，可以让其导出一张透明的 png 图，这样就可以适应任何场景了。

代码：

.border-image-demo {
  border: 150px solid transparent;
  border-image: url(./border-image3.png) 250 repeat;
}

效果图：

如上，通过两行核心代码（在线示例），我们就实现了设计稿上类似的效果，真的是不要太简单。其中border用于配置边框，border-image用于配置边框图像。具体的用法我们接下来会讲解。

除了上面这种效果，今天文章的题图也是用border-image来实现的，大家感兴趣的可以看下题图示例。

二、border-image 用法快速讲解

首先我们先了解一下border-image的简写语法，如下：<border-image-source> <border-image-slice>? <border-image-repeat>?。其中border-image-source是必须的，另外两个值可以省略。这是border-image比较简单的用法，是一种缩写形式，它可以分解成很多单独的属性，下面我们会一一讲到。

接下来，歪马会用比较简单快速的方式讲解，不会再贴出示例。大家可以自己动动手，只有自己动手才会印象深刻哟。

注意，尝试时，border 属性必须同时指定，否则你可能会看不到效果。

1. border-image-source

这个属性是用来传入作为边框图片的图片源，所有可以放入url()的值都可以使用，包括 SVG/Base64/CSS Gradient 等格式。

2. border-image-slice

该属性是用来指定如何切割边框图片，它主要控制四条切割线对图片进行切割，切割成 9 块。如下图所示，共有上右下左四条线。

该属性最多接受四个正的无单位数字或百分比。初始值为100% 。值的顺序分别对应上右下左 4 条切割线的位置。如果值少于 4 个，则某一个方向缺失的值等于对面的值。如果只有一个值，则四边通用。

此外该值还有一个可选的关键字fill参数，可以用来保留中间区域，默认情况下中间区域是被丢掉的。

3. border-image-repeat

该属性可以指定border-image除了四个切角外，每一边上图片的重复情况。

最多可以指定两个值。如果只有一个值，则用于全部边，如果两个值则第一值控制水平边，第二个值控制垂直边。

主要支持下面几个关键字，其中瓦片是指border-image-slice切割下来的图片块：

1. `stretch`：拉伸充满
2. `repeat`：重复，会切割瓦片，有不完整的瓦片
3. `round`：避免切割瓦片，除非正好，才会重复
4. `space`：重复瓦片，如果不能充满则留有间距

4. border-image-outset

这个属性是用来指定边框图像区域超出边框框的距离，默认值为 0。相当于把图像边框往外挪。

4. border-image-width

该属性用于指定边框图片宽度，支持百分比、无单位的值、auto。最多也可以接受 4 个值，值的复用逻辑与上面的类似。其中无符号单位是乘以border-width作为最终的宽度。

这个属性可以和配合border-image-outset一起使用实现一个原始边框较小，不影响原始框内内容显示的盒子。如下图所示：

上图为 Chrome 下的截图效果，黄色区域为margin区域，其内侧很细的是我设定的4px的border。然后通过border-image-width与border-image-outset向外移动了图片边框，可以对原始盒子影响较小。

三、总结

本文以一个真实的设计稿为例，给大家引入了border-image的实际应用场景，希望大家以后在遇到类似场景时，可以想起这一技术。然后，歪马又快速带大家过了一遍相关的属性。

相信经此一文，你不仅知道了用在哪里，也知道了如何用。

最后，不明白的地方动起手来试一试吧。

参考链接

1. Understanding border-image
2. CSS 属性之 border-image

---

如果你喜欢，欢迎扫码关注我的公众号，我会定期云陪读，并分享一些其他的前端知识哟。