九宫格分割法
九宫格分割法,将边界图利用四条分割线,分割成九个格子,固定左上、右上、右下、左下的格子大小不变,对其余的五个格子进行缩放(平铺、拉伸)。边界图设置后,为了防止边角发生形变,相对的要设置各个方向参数一致的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:值 ,否则需要单独指定不同方向上对应的值