css3 border-image使用说明_ Div+Css教程-查字典教程网

摘要：在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说首先来一个素材图片whiteButton.png然后我们要做成这样的效果：代...

在看这个属性时，好像国内的文章都没给大家说太明白，今天就一起说说

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

css3 border-image使用说明1

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

css3 border-image使用说明2

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

-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;

<div style="-webkit-border-image: url(images/whiteButton.png) 0 12 0 12 stretch stretch;