风铃语

border-image 实现点九图

什么是点九图

点九图是安卓系统中特有的一种图片格式，后缀名是 「.9.png」的图片。

点九图就可以让切图局部拉伸而不是整体拉伸，这样就可以把容易变形的地方保护起来。

点九图详细介绍和原理：https://www.uisdc.com/draw-9-patch-androidopen in new window。

关键属性

border-image-source 设置背景图；

border-image-slice 规定图像的边缘向内偏移像素（上、右、下、左）；

border-image-width 规定将边框图像分割为九个部分的偏移（上、右、下、左）；

代码实现

<style>
.popup {
  padding: 10px;
  width: 300px;
  min-height: 50px;
  border-image-source: url("https://img2.baidu.com/it/u=2989326938,4027860405&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=229");
  border-image-slice: 20 50 20 50 fill;
  border-image-width: 20px 50px 20px 50px;
  .text {
    text-align: left;
    font-size: 16px;
  }
}
</style>

<div>
  <div>
    浅淡人生，岁月的痕迹，我们一路走，一路感悟了着人生风雨，新的、旧的、来的、去的，不断上演，也不断错过，远了、近了、天涯也咫尺，始料不及也匆匆逝去。　　涉世红尘，谁能没有悲喜，人间行走，谁能没有得失，来来去去，风风雨雨，谁能没有挫折和委屈，岁月无情，将生活碾转成泥，时光寂寥，也有很多事情让我们承担不起，不得不学着放弃。
  </div>
</div>