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>

 

posted @ 2015-04-23 11:00  绿罗兰  阅读(125)  评论(0编辑  收藏  举报