border-image 边框图像

设置边框的图像。此属性是 border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat 的简写形式。

语法:

{ border-image : sBorderImage }

默认值: none 100% 1 0 stretch
参见 border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat 的各个默认值。
继承性:
DOM 语法: object.style.borderImage = sBorderImage
适用于: 所有元素
浏览器支持: FirefoxChromeOperaSafari

可能的值:

<‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>? [ / <‘border-image-outset’> ]? ]? || <‘border-image-repeat’>

描述
border-image-source 指定边框的图像地址。
border-image-slice 指定图像向内的偏移量。
border-image-width 指定边框图像宽度。
border-image-outset 指定图像向外的突出的距离。
border-image-repeat 指定图像是重复、圆整还是拉伸显示。

说明:

例子 1:

<style>
#cavas1
{
 width:600px;
 padding:20px;line-height:1.3em; 
 border-width:27px;
 -moz-border-image:url(http://dotnet.aspx.cc/Images/border.png) 27 27 stretch round;
 -o-border-image:url(http://dotnet.aspx.cc/Images/border.png) 27 27 stretch round;
 -webkit-border-image:url(http://dotnet.aspx.cc/Images/border.png) 27 27 stretch round;
 border-image:url(http://dotnet.aspx.cc/Images/border.png) 27 27 stretch round;
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳,聪明俊美,被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机,登门参试者甚多,但都不中意。宦门公子颜俊,不学无术,恃财仗势,选美寻欢。在庙会上,颜俊见秋芳貌美,欲以金钱取得她的欢心,虽遭碰壁,却不死心。于是,他指使其债户果子铺掌柜尤辰,前往高府骗婚。不料高赞择婿严谨,定要会文相婿。颜俊腹中无墨,又怕高家认出他是追赶高小姐的无耻之徒,便想出移花接木之计,假以会文为名,蒙骗其表弟钱青冒名顶替,到高府应试。相亲宴上,秋芳乔装改扮,亲赴席前送酒试才。高赞见钱青才貌出众,欣然允亲。吉日将临,高赞定要佳婿亲自迎娶。颜俊唯恐真情败露,再次请钱青帮助。钱青正为替他相亲之事悔恨不已,拒不替他迎亲。后来,颜母亲自出面,迫使钱青应允。钱青万般无奈,违心从命。迎亲之日,高府宾客满座,盛情款待,忽然,天气突变,风雪交加,湖水浪涌,无法行船,高赞恐误吉日良辰,执意在他家拜堂成亲。迎亲者自知不妥,但又不能言明,只得拜天地,入洞房。秋芳夙愿得偿,感到无比幸福,对钱青关怀备至。可是,钱青悔恨交加,不知所措。花烛之夜,一对新人,各怀心事,痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲,怒不可遏,硬拉钱青上公堂,告钱青骗婚占妻之罪。高赞得知真情,也拉尤辰到公堂论理。知县在夫人的协助下,审明案情,惩戒了颜俊,成全了钱青与秋芳的姻缘。
</div>
测试结果:Firefox 4,Opera 11,Safari 5,Chrome 10 都支持该属性。
本属性最后更新时间:2011-05-03 11:24:56