CSS3 边框图片(border-image)使用方法
备忘记:
1、CSS3 边框图片使用方法。
border-image:
[border-image-source 图片来源 ] 取值:none url(图片路径)
[ border-image-slice分割方法 ] 取值:浮点数或百分比
[ border-image-repeat重复方式 ]
border-image-slice
该属性指定从上,右,下,左方位来分隔图像,将图像分成4个角,4条边和中间区域共9份,中间区域始终是透明的(即没图像填充),除非加上关键字 fill。
border-image-width
说明:设置或检索对象的边框厚度。
该属性用于指定使用多厚的边框来承载被裁剪后的图像。该属性可省略,由外部的border-width来定义。对应的脚本特性为borderImageWidth。
取值:
<length>: 用长度值指定宽度。不允许负值。
<percentage>: 用百分比指定宽度。不允许负值。
<number>: 用浮点数指定宽度。不允许负值。
auto: 如果auto值被设置,则border-image-width采用与border-image-slice相同的值。
border-image-outset
说明:置或检索对象的边框背景图的扩展。
该属性用于指定边框图像向外扩展所定义的数值,即如果值为10px,则图像在原本的基础上往外延展10px再显示。对应的脚本特性为borderImageOutset。
取值:
<length>: 用长度值指定宽度。不允许负值。
<number>: 用浮点数指定宽度。不允许负值。
border-image-repeat
说明:设置或检索对象的边框图像的平铺方式。
该属性用于指定边框背景图的填充方式。可定义0-2个参数值,即水平和垂直方向。如果2个值相同,可合并成1个,表示水平和垂直方向都用相同的方式填充边框背景图;如果2个值都为stretch,则可省略不写。对应的脚本特性为borderImageOutset。
取值:
stretch: 指定用拉伸方式来填充边框背景图。
repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。写本文档时仅Firefox能看到该效果
space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。写本文档时尚无浏览器能看到该效果