css 边框

怀抱清风 2017-04-26

为边框应用图片

顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。

例如:

background:url(xx.jpg) 10px 20px no-repeat;

但是又比背景图片复杂一些。

例如将下面的图片作为边框图片

css 边框

根据barder-image的语法:

css 边框

#border-image{
   background:#F4FFFA;
   width:210px; height:210px; border:70px solid #ddd;
   border-image:url(borderimg.png) 70 repeat  
}

注:solid 设置实线 dootted点线 dashed虚线 double 双线 

效果图如下:

css 边框

repeat 就是一直重复,超出部分裁剪掉,而且是居中开始重复

Round参数可以理解为圆满的铺满,为了实现圆满所以会拉伸或压缩

例如:

#border-image {
     width:170px;
     height:170px;
     border:70px solid;
     border-image:url(borderimg.png) 70 round;
 }

 效果图:

css 边框

strecth就是拉伸,有多长拉多长

border-image:url(borderimg.png) 70 stretch

 效果图:

css 边框

相关推荐