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;

应用场景

• 处理不规则图形背景
• 处理气泡背景
• 处理小图片放大后背景
  等等…