怀抱清风 2017-04-26
为边框应用图片
顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。
例如:
background:url(xx.jpg) 10px 20px no-repeat;
但是又比背景图片复杂一些。
例如将下面的图片作为边框图片
根据barder-image的语法:
#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }
注:solid 设置实线 dootted点线 dashed虚线 double 双线
效果图如下:
repeat 就是一直重复,超出部分裁剪掉,而且是居中开始重复
Round参数可以理解为圆满的铺满,为了实现圆满所以会拉伸或压缩
例如:
#border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; }
效果图:
strecth就是拉伸,有多长拉多长
border-image:url(borderimg.png) 70 stretch
效果图: