站长资源网页制作

在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说 推荐大家看下 这篇文章 https://www.jb51.net/css/38358.html

首先来一个素材图片whiteButton.png

然后我们要做成这样的效果：

代码（呵呵！请不要急，继续向下看）：

复制代码代码如下:
<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(images/whiteButton.png) 0 12 0 12 round stretch;
border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;
display: block;
width:600px;
border-width:0 12px;
padding:10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;+color:black;">在safari3+和FF3.5,chrome5.0+,opera10.53浏览器里能看到边框背景图</div>

下面我们来讲一下基本知识：

一。定义： border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}

border-width: 10px;