CSS3 边界图片实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3 边界图片 实例 - 自学教程(runoops.com)</title>
    <style>
        div
        {
            border:15px solid transparent;
            width:250px;
            padding:10px 20px;
        }

#round
        {
            -webkit-border-image:url(//demo.runoops.com/static/img/border.png) 30 30 round; /* Safari 5 and older */
            -o-border-image:url(//demo.runoops.com/static/img/border.png) 30 30 round; /* Opera */
            border-image:url(//demo.runoops.com/static/img/border.png) 30 30 round;
        }

#stretch
        {
            -webkit-border-image:url(//demo.runoops.com/static/img/border.png) 30 30 stretch; /* Safari 5 and older */
            -o-border-image:url(//demo.runoops.com/static/img/border.png) 30 30 stretch; /* Opera */
            border-image:url(//demo.runoops.com/static/img/border.png) 30 30 stretch;
        }
    </style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="//demo.runoops.com/static/img/border.png" />

</body>
</html>