CSS3 border-image 切割参数 动态详解

转载于https://jingyan.baidu.com/article/90895e0fcc781c64ec6b0b9f.html

不清楚css3 中border-image 切割image的参数的具体意义？请进，根据本人个人理解，制作的本次演示，希望对各位有所帮助

方法/步骤

 

1. 1

   根据图示，切割完border的背景切片后，并且也已经设置了border的宽度（*重要*）。将相应的切片填充到border的相应位置。

       需要注意的是：不论border的宽度设置的多大，后面切割的参数都是根据border-image引入图片的尺寸设置的参数, 或者说是根据引入图片大小设置的切割参数。

       切割后的四周的八个切片，四个角根据border设置的大小全尺寸自动缩放显示到border对应的四个角。

       除四个角外的其他中间切片（上中，右中间，下中，左中间），可以根据设置做拉伸或重复的设置操作显示到对应的border位置

   END