第二个参数

来源:2-4 CSS3边框 为边框应用图片 border-image

予尔心安

2014-12-12 12:03

第二个参数具体是啥意思?应该是四个角切图的大小吧?可是为什么将第二个参数改大后,border会变细啊?

写回答 关注

2回答

  • 失落的蛐蛐
    2015-05-19 17:13:41

    @予尔心安  谢谢你提供的链接,看了之后基本上懂了

  • 予尔心安
    2014-12-12 12:10:45

    3、剪裁特性。如果您对CSS中clip属性(clip:rect(auto, auto, auto, auto))比较了解,则这里理解就会轻松些。clip可以说是CSS中一个明目张胆的剪裁属性,而此处的属性虽然表意上不是剪裁,但是在border-image效果的实现上来说,就好像是个剪裁工具,把边框图片四分五裂,再重新安置,变形。其有1~4个参数,其方位规则符合CSS普遍的方位规则(与margin,padding等或border-width一致),上右下左顺时针,再赋予剪裁的含义,举个简单的例子,前面提到,支持百分比宽度,所以这里“30% 35% 40% 30%的”示意可以用下图表示:

    看图说话就是,离图片上部30%的地方剪裁一下,在右边35%的地方剪裁一下,在离底部40%的地方裁剪一下,在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”,形成了九个分离的区域,这就是九宫格,这是下面深入讲解border-image的基础。


    摘自:http://www.wqcms.com/html/c31/2012-06/3381.html

    自己百度到了....

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题