原文链接：http://www.cnblogs.com/Hfive/p/3624004.html
图像边框：IE9.0及以下均不支持
border-image:url() 该属性用于指定边框宽度（上 右 下 左 ） 背景图的填充方式（[ stretch | repeat | round ]默认值：stretch ）
）
stretch： 指定用拉伸方式来填充边框背景图。
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
如：border-image: url(1.png) 49% repeat; border-image: url(1.png) 125 202 166 166 round;
例子：
使用的背景图：
效果一：
原理：
上下左右各以166px的距离分割成九块，a，b，c，d四块分别为div的四个角，且每个角的背景图大小会自适应为border的大小，然后两个角之间的背景图根据div的boder除去四个角的大小进行拉伸。
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 300px; 9 width: 300px; 10 border-width: 50px; 11 border-image: url(1.png) 166 round; 12 background: #ccc; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
效果二：
原理：
对背景图上下左右进行100%的切割，即div四个角为整张背景图，由于切割超过50%，两个角之间的背景图没有重合部分，所以border-image无法进行拉伸。
代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 height: 300px; 9 width: 300px; 10 border-width: 50px; 11 border-image: url(1.png) 100% round; 12 background: #ccc; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
