052仿安卓.9图实现Div模拟blockly风格的办法
.9图的介绍
格式
.9图的后缀格式为:.9.png
作用
.9图可以进行拉伸,如水平、竖直方向的延长,而清晰度不变。
令一张图片实现多种拉伸效果,减少UI切图的使用,降低包体积。
在UE提供的原始图中,图片的四周会有黑色的线条,这些黑色横线正是.9图能够实现拉伸的原理所在。
.9图原理,黑色横线作用
顶部横线代表水平延伸的时候,其他位置不变,此处横线做水平延伸的部分。
底部横线代表水平延伸的时候,内容在水平方向的显示区域。
左方竖线代表竖直延伸的时候,其他位置不变,此处横线做竖直延伸部分。
右方竖线代表竖直延伸的时候,内容在竖直方向的显示区域。
border-image-slice
border-image-slice属性用于划分或切片由border-image-source属性指定的图像。
- border-slice属性将给定图像划分为:
- 9个地区
- 4个角
- 4条边
- 中部地区
- 如下所示代码:
border-image-source: url('/img/sc2.png');
border-image-slice: 10 20 10 33 fill;
border-image-width: 10px 20px 10px 33px;
应用场景
- 处理不规则图形背景
- 处理气泡背景
- 处理小图片放大后背景
等等…