css中的.9效果

前阵子在画页面的时候有一个列表区域，有个背景图，不是纯颜色，图片的上下都有特殊的小图标嵌在里面，由于列表是接口返回的数据，所以整个区域的高度也是不固定的，那时候就想css 要是有 安卓、Ios的.9图片就好了 ，就能拉伸不变形了。

在网上找了一下 css .9 还真有个类似的——border-image。

border-image主要有三个属性：图片(border-image-source)，裁剪位置(border-image-slice)，重复性(border-image-repeat)。

border-image-source 就是设置边框图片，用url()。

border-image-slice就是对图片进行裁剪。上右下左4刀将图片分割成9块，可以不写单位，默认像素(px)。如果没有第四个，这第四个和第二个相同；如果只有两个，则第三个和第一个相同，第四个和第二个相同。如果只有一个，这四个相同。还有一个比较关键的点fill,如果不加fill，这个区域中间是镂空的，只有加了fill中间部分才会填充。(如果设置border-image-slice:20 25 30 35的话就是距上20一条线，距右25一条线，距下30一条线，距右35一条线，如下图,只是示意图，像素是不准的)

border-image-repeat有repeat(重复)、round(平铺)、stretch(拉伸)，默认stretch。这个示例上看的比较清楚。(repeat和round的区别 repeat不进行拉伸，不凑整，round会适度的拉伸)