qss九宫格分割法

九宫格分割法九宫格分割法,将边界图利用四条分割线,分割成九个格子,固定左上、右上、右下、左下的格子大小不变,对其余的五个格子进行缩放(平铺、拉伸)。边界图设置后,为了防止边角发生形变,相对的要设置各个方向参数一致的border-width。示例代码如下:#pushButton_3{ border-image:url(:/new/prefix1/images/song.jpg) 60 60...
摘要由CSDN通过智能技术生成

九宫格分割法

在这里插入图片描述
九宫格分割法,将边界图利用四条分割线,分割成九个格子,固定左上、右上、右下、左下的格子大小不变,对其余的五个格子进行缩放(平铺、拉伸)。边界图设置后,为了防止边角发生形变,相对的要设置各个方向参数一致的border-width。
示例代码如下:

#pushButton_3{
	border-image:url(:/new/prefix1/images/song.jpg) 60 60 60 60;
	border-width:60;
}

#pushButton_4{
	border-image:url(:/new/prefix1/images/song.jpg) 100 2 100 10 ;
	border-top:100;
	border-right:2;
	border-bottom:100;
	border-left:10;
}

图片分割的四个参数的含义分别是:
参数一:上分割线距离顶部边界的像素点个数
参数二:右分割线距离右边界的像素点个数
参数三:下分割线距离底部边界的像素点个数
参数四:左分割线距离左边界的像素点个数
只要记住顺序:“上–右--下–左”的顺序即可
理解了参数的意思,那么border-width的设置就可以理解了,也分别对应了了border-width的“上–右--下–左”。
注:如果四个方向值相同,那么可以直接写border-width:值 ,否则需要单独指定不同方向上对应的值

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值