css 边框

为边框应用图片

顾名思义就是为边框应用背景图片，它和我们常用的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

 效果图：