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
效果图:
相关推荐
myloveqiqi 2020-08-09
猫沙盆 2020-07-08
猫沙盆 2020-07-07
云端漂移 2020-07-05
SuiKaSan的自学室 2020-06-13
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
jiedinghui 2020-05-14
wcssdu 2020-05-11
somboy 2020-04-19
zengni 2020-04-16
somboy 2020-02-23
jiedinghui 2020-02-20
MaureenChen 2020-02-17
cfang00 2013-05-15