border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 20 stretch;
正解在这里:上面20 stretch可以写成 20 20 20 20 strech,分别表示:上边 右边 下边 左边 拉伸/压缩。
现在以上边为例:
你设置了border:15px,那么上边线宽为15像素(这里是线的实际宽度,很好理解,不用多说,但是我还是要提出来)
border-image: 图片 20 strech;这个表示从图片中的上边取20像素(以上边为例),然后压缩或拉伸到线宽
我们取的图片为20个像素,但是线宽为15个像素,所以被压缩了
结论,所以你看到的图片不一样
不信你可以将20从0慢慢增加,你会发现这个规律。
border:15px solid #ccc;//你设置了15px,那它就是15px
将stretch改为repeat,stretch表示拉伸,长和宽大小不一样,拉伸效果就不一样。