CSS - border-image 属性

CSS border-image 属性允许您使用图片作为元素的边框。它是一个简写属性，用于定义 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的值。

语法

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

属性值

值	描述
border-image-source	指定用作边框的图片路径。
border-image-slice	指定如何切片图片。
border-image-width	指定指定图片的宽度。
border-image-outset	指定边框图片超出边框框的延伸量。
border-image-repeat	指定图片是否要圆角、拉伸或重复。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 边框图片属性示例

以下示例使用不同的值解释了 border-image 属性。

定义边框图片属性的所有值

border-image 属性是用于将值设置为图片的源、切片、宽度、外边距和重复的简写属性。在以下示例中，这些属性的值已在一个声明中声明。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 200px;
                width: 300px;
                margin: 20px;
                border: 20px solid transparent;
        }

        .border-image-example1 {
                border-image: url(/css/images/white-flower.jpg)
                50 round;
        }

        .border-image-example2 {
                border-image: url(/css/images/white-flower.jpg)
                10 20 30 40 round;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>

        <div class="border-image-example1 size">
                This border has been set using border-image
                with same slice value 50 for all sides.
        </div>


        <div class="border-image-example2 size">
                This border has been set using border-image
                with separate slice values 10 20 30 40 
                for all sides.
        </div>

        <p>
                Image used:
        </p>
        <img src="/css/images/white-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

边框图片属性的组成属性

border-image 属性组合了 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat。以下示例演示了这些属性如何协同工作以创建边框图片效果。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .size {
                height: 150px;
                width: 200px;
                margin:60px;
                border: 30px solid transparent;
        }

        .border-image-example1 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 70;
                border-image-width: 15px;
                border-image-outset: 25px;
                border-image-repeat: repeat;
        }

        .border-image-example2 {
                border-image-source: 
                url(/css/images/white-flower.jpg);
                border-image-slice: 20 40 60 80;
                border-image-width: 17px;
                border-image-outset: 15px;
                border-image-repeat: stretch;
        }
    </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div class="outer-box">
        <div class="border-image-example1 size">
                This border has been set using consitutent 
                properties of border-image with 70 slice, 
                25px width, 35px outset and repeat repeat.
        </div>
        </div>
        <div class="outer-box">
        <div class="border-image-example2 size">
                This border has been set using consitutent 
                properties of border-image with 20,40,60,80
                slice, 17px width,15px outset and 
                repeat stretch.
        </div>
        </div>
        <p>
                Image used:
        </p>
        <img src="/css/images/white-flower.jpg" 
        alt="flower" height=150>

</body>

</html>

带有渐变的边框图片属性

CSS 渐变也可以用于设置元素的边框。支持三种类型的渐变：线性、径向和锥形。这些在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
                height: 200px;
                width: 200px;
                margin: 20px;
                border-style: solid;
                border-width: 10px;
        }

        img.linear-gradient {
                border-image: 
                linear-gradient(45deg, rgb(15, 64, 161),
                rgb(228, 6, 17)) 1;
        }

        img.radial-gradient {
                border-image: radial-gradient(rgb(58, 61, 60),
                rgb(47, 227, 221)) 1;
        }

        img.conic-gradient {
                border-image: 
                conic-gradient(red, yellow, green, aqua, blue) 
                1;
        }
   </style>
</head>

<body>
        <h2>
                CSS border-image property
        </h2>
        <div>
        <p>
                a) Linear Gradient
        </p>
        <img class="linear-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="linear-gradient" />
        </div>
        <div>
        <p>
                b) Radial Gradient
        </p>
        <img class="radial-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="radial-gradient" />
        </div>
        <div>
        <p>
                b) Conic Gradient
        </p>
        <img class="conic-gradient" 
        src="/css/images/white-flower.jpg" 
        alt="conic-gradient" />
        </div>
</body>

</html>

支持的浏览器

属性
border-image	16.0	11.0	15.0	6.0	15.0

css_properties_reference.htm

打印页面