052仿安卓.9图实现Div模拟blockly风格的办法

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;

应用场景

  • 处理不规则图形背景
  • 处理气泡背景
  • 处理小图片放大后背景
    等等…
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿赛工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值