在css3里border-image:url(border.png) 30 30 round的30,30,表示什么意思?
您的意思是这两个30都是图片边框向内偏移这个属性的参数还是? 谢谢
对,都是内移偏量,第一个是上下偏量,后一个是左右偏量
其实应该是四个值30 30 30 30(上右下左),简写为两个30分别表示“上下”“左右”两个位置,这个是border-image-slice(图片边框向内偏移)这个属性的参数,利用这个属性的图片你应该注意一下图片的样式。
边框将border-image分成了九部分:border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。假设现在边框的宽度是27像素,则上面所说的九部分正如下图所表示的(放大400%):
1、调用边框图片
border-image的url属性,通过相对或绝对路径链接图片。
2、边框图片的剪裁
border-image的数值参数剪裁边框图片,形成九宫格。
3、剪裁图片填充边框
边框图片被切割成9部分,以一一对应的关系放到div边框的九宫格中,然后再压缩(或拉伸)至边框(border-width或border-image-width)的宽度大小。
4、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性(拉伸或平铺),左右的格子执行垂直方向的重复属性,而中间的那个格子则水平重复和垂直方向的重复都要执行。
具体是指哪里的宽和高,w3c也不是这样说的吧