Web速查-索引

Alt text

定义

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>鱼C-零基础入门学习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