CSS3简明教程-2.1.CSS3边框之border-image_w3cschool border-image-优快云博客

本文详细介绍了CSS3中使用边框图片的功能，包括如何设置边框图像、边框图像的各种属性及其作用，以及不同浏览器对这些属性的兼容性。通过实际例子展示了如何在网页中应用边框图片，使得边框更具个性化。

CSS3对元素边框进行了改进，可以将边框定义为图片。

属性名称：border-image

属性值：url(resources/images/border.png) 30 30 round;

其实border-image的属性值是一系列值得组合，w3cschool对其描述如下：

可能的值

值	描述	测试
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	测试

有一点需要注意，border-image-repeat属性的值分别是repeat，round，stretch；而不是上面说的repeated，rounded，stretched。

浏览器对border-image渲染方式有些难以理解，下面对w3cschool的例子进行了一下优化，可以更清晰的看到其图片边框处理方式。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        div {
            border: 15px;
            width: 300px;
            height: 60px;
        }
        #round {
            -moz-border-image: url(resources/images/border1.png) 30 30 round;
            /* Old Firefox */
            -webkit-border-image: url(resources/images/border1.png) 30 30 round;
            /* Safari and Chrome */
            -o-border-image: url(resources/images/border1.png) 30 30 round;
            /* Opera */
            border-image: url(resources/images/border1.png) 30 30 round;
        }
        #stretch {
            -moz-border-image: url(resources/images/border1.png) 30 30 stretch;
            /* Old Firefox */
            -webkit-border-image: url(resources/images/border1.png) 30 30 stretch;
            /* Safari and Chrome */
            -o-border-image: url(resources/images/border1.png) 30 30 stretch;
            /* Opera */
            border-image: url(resources/images/border1.png) 30 30 stretch;
        }
    </style>
</head>

<body>

    <div id="round"></div>
    <br>
    <div id="stretch"></div>

    <p>使用的图片：</p>
    <img src="resources/images/border1.png">
</body>

</html>

具体效果如下图：