为什么切割图片的宽度设置为20时 边框显示的切割图片的宽度是不一样的？
来源：2-4 CSS3边框 为边框应用图片 border-image
tingfengwenyu
2015-12-18 10:21
border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 20 stretch;
写回答
关注
3回答
-
- zhangcl
- 2016-01-29 17:00:31
正解在这里：上面20 stretch可以写成 20 20 20 20 strech,分别表示：上边 右边 下边 左边 拉伸/压缩。
现在以上边为例：
你设置了border：15px,那么上边线宽为15像素（这里是线的实际宽度，很好理解，不用多说，但是我还是要提出来）
border-image: 图片 20 strech;这个表示从图片中的上边取20像素(以上边为例)，然后压缩或拉伸到线宽
我们取的图片为20个像素，但是线宽为15个像素，所以被压缩了
结论，所以你看到的图片不一样
不信你可以将20从0慢慢增加，你会发现这个规律。
-
- 狂飙的蜗牛_1
- 2015-12-18 11:08:45
border:15px solid #ccc;//你设置了15px，那它就是15px
-
- qq_心怀美好
- 2015-12-18 11:03:05
将stretch改为repeat，stretch表示拉伸，长和宽大小不一样，拉伸效果就不一样。
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242553 学习 · 2623 问题
相似问题