web端的九宫格（点九图）

前沿
在前端开发过程中，总能遇到配景图被内容过多撑开并且图片模糊变形，而做不到自适应内容的场景，怀揣着标题不停的百度搜索，实验各种方法解决，显然无果。在同事的提醒下，相识到了九宫格，也叫点九图，在安卓开发中经常用到这种方法，那么我们就来研究看下什么是点九图吧。
什么是点九图

点九”是andriod平台的应用软件开发里的一种特殊的图片情势，文件扩展名为：.9.png。
其实相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中心区域。
如下图，在图片团体拉伸时，可以保持①③⑥⑧不变，保证圆角等细节，②⑦横向拉伸，④⑤纵向拉伸，避免了普通拉伸的模糊失真。

web端也可以“点九图”

技能的尽头是通用，既然安卓端可以用，是不是web端也可以使用，带着这个标题查看了W3C文档，好像有个熟悉的CSS属性：border-image-slice，先看看具体的内容，再亲自实验下：

该属性规定图像的上、右、下、左侧边沿的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中心区域。除非使用了关键词 fill，否则中心的图像部分会被丢弃。假如省略第四个数值/百分比，则与第二个值相同。假如省略第三个值，则与第一个值相同。假如省略第二个值，则与第一个值相同。
文字可能有些多，没关系，下面使用一张图例表明以上内容：

在PS中，它的尺寸和各部分已经被预先设定好（下图为方便观看添加了配景致）：

像点九图一样，它被平均划分为9个27*27的小方格，然后我们就可以上代码啦！
给div增加一个class=“dianjiu”，然后在CSS里开始写：
.dianjiu{
border:27px solid #000;
border-image-source:url(border.png);
border-image-slice:27 27 27 27;
border-image-width:27px 27px 27px 27px;
border-image-outset:27px 27px 27px 27px;
border-image-repeat:repeat;
}
接下来看看具体的效果图：

border:27px solid #000;
border-image-source:url(border.png);
规定了边框的粗细、形态、颜色及引入图片的地点（图片放在同路径一级文件夹下了，所以只写图片名就好）。
border-image-slice:27 27 27 27;
关键步调！跟着的4个27指的是：
1.在间隔顶部内偏移区域27px处分割；
2.在间隔右侧内偏移区域27px处分割；
3.在间隔底部内偏移区域27px处分割；
4.在间隔左侧内偏移区域27px处分割；
4次分割后，图片就酿成了一张九宫格——

其中4个角①③⑦⑨固定在div的边角上，大小随border-width调整（我们在上一步设定了border:27px），而团体的横向和纵向拉伸是完全不到场的。至于⑤，在这里已经被调和掉了，我的这张边框中原来就是透明的，可以不用去管，假如必要配景铺满⑤，在border-image-slice属性值背面添加一个fill即可。
border-image-width:27px 27px 27px 27px;
这一步其实覆盖了border:27px，直接指定边框图片宽度。这里把四个边都设定成27px。
border-image-outset:27px 27px 27px 27px;
border-image-outset的作用是让边框配景延伸到盒子外。（下图为盒子模子）

要设定符合的宽度，否则离得较近的div在视觉上就会重叠在一起，影响原有布局。
border-image-repeat:repeat;
这一项的默认值是stretch，即在水平和垂直方向上拉伸以满足实际尺寸，使用repeat可以理解为重复，直至铺满整个区域；还有个值round，是先把图片切成均等区域，再平铺，这样可以避免切一半的尴尬……不过对于这张图，三种均是适用的。
万事俱备！接下来就可以抛弃之前切的各种边框，留下一张81*81的png就可以了~
磨刀不误砍柴工，很多更加复杂的边框也可以用它玩出花来。
比起原来的切图方案，无论是速率还是效率都优化了很多。

参考链接：

【设计前端手拉手】Web端的“点九图”

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。