web端的“点九”图

首先，什么是点九图？

最常见的应用：聊天气泡
如果我们发送的信息很少，气泡是这个样子的
而如果发送的信息较多是，气泡就会变大
这里有个细节，就是不管你的绿色方块有多大，小尾巴的大小和距离上方的位置是不变的，如果直接png图片拉伸，小尾巴一定会随之失真，四周的圆角也会失真（敲黑板）这时候点九图就派上用场了。

以上是我用ps随便画的一个九宫格图，想象一下，3号的位置就是小尾巴的位置，那我们要做的就是在内容5不断扩大的时候，保持1379不变，28横向拉伸，46纵向拉伸，这样就可以完成需求了。

实际操作

设计师给了需求之后，我查了半天终于明白了是怎么回事，正要感谢伟大的设计者搞出这么人性化设计，然鹅！
点九图只能在Android端使用！
难道我就此向命运屈服了吗？当然不行！
感谢伟大的度娘，感谢伟大的css3，还真让我找到的类似的方法。

css3里有一个border-image 属性，主要用于定义边框的样式，具体参数如下：

参数可以合并写也可以分开写，我合并起来写几个例子。
首先，定义一个宽高为600px的盒子，以下例子将省略重复代码

<div class="nine"></div>
div {
            width: 600px;
            height: 600px;
        }

1.边框拉伸，内容空白

 .nine {
            border: 30px solid transparent;
            border-image: url(./未标题-1.jpg) 62 62 stretch;
        }

2.边框铺满，内容填满

 .nine {
            border: 15px solid transparent;//改变边框的宽度
            border-image: url(./未标题-1.jpg) 62 62 fill round;
        }

注：图片是200*200的，62只是一个估计的px数，所以可能会有毛边（如图一），真实情况下，精准的数据不会造成这种情况。

总结

以上2个例子基本可以涵盖大部分可能出现的情况，灵活使用 fill/round/stretch参数可以达到想要的效果。

以上就是css3模拟点九图原理的过程，希望可以帮助到前端小伙伴们。

感谢我的设计师张恒，奇奇怪怪的知识又增加了。