border-image

定义

border-image属性使用图片作为对象的边界。

注意：当table设置border-collapse为collapse无效。

语法

border-image:border-image-source|border-image-slice|border-image-width|border-image-outset|border-image-repeat;

属性值

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        div
        {
            border:15px solid transparent;
            width:300px;
            padding:10px 20px;
        }
        #round
        {
            /* Old Firefox */
            -moz-border-image:url(../img/logo.png) 30 30 round;
            /* Safari and Chrome */
            -webkit-border-image:url(../img/logo.png) 30 30 round;
            /* Opera */
            -o-border-image:url(../img/logo.png) 30 30 round;
            border-image:url(../img/logo.png) 30 30 round;
        }
        #stretch
        {
            /* Old Firefox */
            -moz-border-image:url(../img/logo.png) 30 30 stretch;
            /* Safari and Chrome */
            -webkit-border-image:url(../img/logo.png) 30 30 stretch;
            /* Opera */
            -o-border-image:url(../img/logo.png) 30 30 stretch;
            border-image:url(../img/logo.png) 30 30 stretch;
        }
    </style>
</head>
<body>
    <div id="round">在这里，图片铺满整个边框。</div>
    <br>
    <div id="stretch">在这里，图片被拉伸以填充该区域。</div>
    <p>这是我们使用的图片：</p>
    <img src="../img/logo.png">
    <p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
    <p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

在这里，图片铺满整个边框。

在这里，图片被拉伸以填充该区域。

这是我们使用的图片：

注释： Internet Explorer 不支持 border-image 属性。

border-image 属性规定了用作边框的图片。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari	Chrome	FireFox	IE
6.0	3.0	4.0	9.0