点九图

点九图 是 Andriod 平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png

按照 UI 提供的素材,如果我们单纯的进行等比例缩放,遇到一些边角像素比较复杂(不规则)的情况,进行等比例拉伸时,很可能会造成拉伸变形,

其实相当于把一张 PNG 图分成了 9 个部分(九宫格),分别为 4 个角,4 条边,以及一个中间区域。

四周保持不同,中间区域根据内容伸缩。

.content {
border-image-source: url('nine-patch.png');
border-image-slice: 48 61 27 61 fill;
border-image-width: 48px 61px 27px 61px;
border-image-outset: 48px 61px 27px 61px;
border-image-repeat: repeat;
}

border-image-slice 四个属性值分别对应上、右、下、左。

分别表示上、右、下、左边距距离真正内容区域的距离。