在css3里border-image:url(border.png) 30 30 round的30,30,表示什么...

发布网友 发布时间：2022-04-27 05:15

我来回答

共4个回答

热心网友 时间：2022-04-06 13:24

其实应该是四个值30 30 30 30（上右下左），简写为两个30分别表示“上下”“左右”两个位置，这个是border-image-slice（图片边框向内偏移）这个属性的参数，利用这个属性的图片你应该注意一下图片的样式。必须是

这种样子的，不能是普通的图片，这个就是图片向内的偏移量，这个偏移量的最正常的值就是每个小块的宽度，当然也可以不用这样，但是也需要找个合适的值，这个合适的值根据不同的背景图是不一样的，这个需要自己多做几个图片，改成不同的值试一下，希望对你有帮助，不懂请继续追问，解决请采纳

追答对，都是内移偏量，第一个是上下偏量，后一个是左右偏量

热心网友 时间：2022-04-06 14:42

其实应该是四个值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、执行重复属性
被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。

热心网友 时间：2022-04-06 16:17

热心网友 时间：2022-04-06 18:08