CSS3的边框(border)属性-image
还是 先来介绍它的语法:
border-image : none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
相关属性 : border-image:border-top-image , border-right-image , border-bottom-image , border-left-image
border-corner-image:border-top-left-image ,
border-top-right-image , border-bottom-left-image , border- bottom-right-image
取值:
默认值。无背景图。<image>:使用绝对或相对 url 地址指定背景图像。<number>:边框宽度用固定像素值表示。 <percentage>:边框宽度用百分比表示。[ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。)
附上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="Tencent-ISRD" />
<meta name="Copyright" content="Tencent" />
<title>Border-image</title>
</head>
<body>
<div style="-webkit-border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;-moz-border-image: url(img/bt_blue.png) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;+color:black;">在safari3+和FF3.5浏览器里能看到边框背景图</div>
</body>
</html>