玩转 CSS Border-Image

篇外话： 感受很是对不起我为数很少来之不易的粉丝们，以前列的陪读计划，由于工做缘由被生生的摧残掉了。你要问为何的话？那就是太忙呗，忙到没空写文章的那种。不过“广大”粉丝们放心，歪马已经把本身想象成一只小毛驴，努力追着前面的胡萝卜往前赶了。

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

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

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

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

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

切角的圆角矩形

请你必定动动手指，放大了仔细看。这四个圆角矩形切掉了一个角，造成了一个不规则的图形，不规则图形有一个发光的 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来实现的，你们感兴趣的能够看下题图示例。

题图效果

2、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 块。以下图所示，共有上右下左四条线。

border-image-slice切割效果

该属性最多接受四个正的无单位数字或百分比。初始值为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一块儿使用实现一个原始边框较小，不影响原始框内内容显示的盒子。以下图所示：

border-image-width与border-image-outset配合

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

3、总结

本文以一个真实的设计稿为例，给你们引入了border-image的实际应用场景，但愿你们之后在遇到相似场景时，能够想起这一技术。而后，歪马又快速带你们过了一遍相关的属性。

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

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

参考连接

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

---

若是你喜欢，欢迎扫码关注个人公众号，我会按期云陪读，并分享一些其余的前端知识哟。