首先我们看一下要用css3中border-image制作的效果图
不用担心，不是用一长条背景作出的效果，接下来我们得准备一张如下的图片,名称为：webskysbg.png
css3中border-image语法及用法讲解如下：
border-image ： none <image> [ <number> <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch repeat round ]{0,2}
none： 默认值。无背景图。 <image>： 使用绝对或相对 url 地址指定背景图像。 <number>： 边框宽度用固定像素值表示。 <percentage>： 边框宽度用百分比表示。 [ stretch repeat round ]： 拉伸 重复 平铺 (其中stretch是默认值。)
以下是我们的页面代码（Firefor的写法：-moz-border-image,Chrome和Safari的写法是：-webkit-border-image，这里面不同支持的浏览器都有自己的写法，但属性都一样）
<!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/webskysbg.png) 0 12 0 12 stretch stretch; -moz-border-image: url(img/webskysbg.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>
嘿嘿，我们想要的效果就这样出来了，比css2要方便多了吧，下面我们结合前面的代码具体分析下border-image各个值的意义，请看下图
我们把图片分成九块，看看下图你就明白了stretch、repeat、round以前数值的含义了。
如要我们用百分比(percentage)定义css,那么如下图，同样方便地达到我们想要的效果。
当用border-image是对边框进行定义时border-width一定是要有的，不然图片是显示不出来的
欢迎大家阅读《border_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：border_css
转载请注明原文链接：border_css
