终于搞定border-image难题了！

说实话，我之前一直对border-image这个属性有点懵逼，哈哈，直到这次项目中遇到了才算是真正搞懂了它。

根据上图kan到由于边框大小dou是36px，即便我把右边的slice改大了但是仍然是在36px这个大小内绘制，既然可绘制的宽度大小没变，那么要想画完整要么拉伸，要么缩小，而这里采用的就是拉伸，我猜为啥不采用缩小，是因为要保证图画的连续性，比较跟图片明显拼接相比，拉伸至少还知道是同一张图片。

既然是右边的边框宽度不够导致的，那么我设置后边长度的宽度。

border: 36px solid transparent;border-image: url 100;/*相当于下面的写法：border-image-source: url;border-image-slice: 100;*/

Q正常了下边的A明显有变形，同时中间的白色并没有覆盖。

这是啥，咋成这样了；难道是我border-image-slice不对嘛，可是设计图就是100呀；于是我 检查了设计图，发现的确是这么多，那可Neng是我对这个属性的理解不对，先kankanborder-image-slice文档。

表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。对于矢量图，<number>值与元素大小相关，而非矢量图的原始大小。因此，使用矢量图时使用百分比值geng可取。

于是我根据图片比例算了算得到了140 / = 127

--slice: calc);border: 36px solid transparent;border-image: url var calc) var var;/*相当于下面的写法：border-image-source: url;border-image-slice: var calc) var var;*/

现在kan起来就没问题了；但是kan到右边的边框由于宽度太宽，导致当内容过多的时候会提前换行，并没有Zuo到跟左边差不多，所以这样是不行的，于是我又去学习了一波border-image-width，这个属性是调整图片绘制宽度的，于是我改成了这样：

--slice: calc);border: 36px solid transparent;border-image: url var calc) var var fill / 1.5px 36px; 成果展示

下面就是成果：

害，总算是搞定了。

拿到图片要分析哪些部分需要拉伸，哪些部分不需要拉伸。

你不会还不知道border-image吧，那我跟你普及一下：

在元素的边框位置画图像，而不是常见的solid，dashed这些线条，线段等。具体使用请参考某某文章。

border: 36px solid transparent;border-image: url 100;/*是以下的简写：border-image-source: url;border-image-slice: 100;*/ 说说为什么百度不收录我的文章？

有人说是百度的算法导致的，也有人说是竞争太激烈，还有人说是内容质量不过关...

咱就是说我觉得吧，主要还是内容质量的问题，你写得好，自然就收录了；你写得不好，就呵呵了。