CSS - 边框图像

CSS border-images 属性用于通过将图像设置为任何元素周围的边框来创建自定义边框。

border-image 属性获取图像并将其切分为九个部分（3x3）。然后，它将角放置在边框的角上，并且边缘会根据您的指定重复或拉伸。图像的中间部分将被忽略。

边框图像

图像作为边框的示例

以下代码显示了如何将图像设置为边框的基本示例。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url(/css/images/border.png) 40;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting a 
            border image using CSS
        </p>
    </div>
</body>
</html>

CSS 边框图像源

CSS border-image-source 属性指定要作为边框传递到元素的图像的源（URL）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of setting border image using 
            border image source.
        </p>
    </div>
</body>
</html>

CSS 边框图像切片

border-image-slice 属性定义如何将图像切分为区域，然后使用这些区域绘制边框。

下图演示了如何切分图像以创建边框。图像被分成 9 个部分：四个角、四个边和中心。

“border-image-slice”属性中的值指定图像边缘向内切分的距离。它本质上定义了将用于创建边框的区域的大小。

border-image-slice 的偏移量可以以百分比或长度单位的形式提供，但强烈建议使用百分比。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/scenery2.jpg);
            border-image-slice: 25%;
            padding: 15px;
            width: 50%
        }
    </style>
</head>

<body>
    <div>
        <p>
            See how border is set for this div...
        </p>
    </div>
    <p> Here is full image for your reference: </p>    
    <img src="/css/images/scenery2.jpg" height="160px">
</body>
</html>

CSS 边框图像宽度

border-image-width 属性用于指定要设置为边框的图像的宽度。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-width: 5px;
            border-image-slice: 25%;
            padding: 5px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>
        border-image-width: 5px;
    </div>

    <div style="border-image-width: 10px;">
        border-image-width: 10px;
    </div>

    <div style="border-image-width: 15px;">
        border-image-width: 15px;
    </div>
</body>
</html>

CSS 边框图像偏移

border-image-outset 属性用于指定元素和边框图像之间的间隙。此属性将边框图像推到边框框之外。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: grey;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-width: 10px;
            border-image-slice: 25%;
            border-image-outset: 0px;
            padding: 5px;
            width: 80%;
            margin: 10px 15px 60px;
        }
    </style>
</head>

<body>
    <div>
        border-image-outset: 0px;
    </div>

    <div style="border-image-outset: 20px;">
        border-image-outset: 20px;
    </div>

    <div style="border-image-outset: 25px;">
        border-image-outset: 25px;   
    </div>
</body>

</html>

CSS 边框图像重复

border-image-repeat 属性用于边框周围图像的重复和拉伸特性。默认情况下，边框图像沿边框两侧拉伸。

此属性的 repeat 值会重复沿边框两侧指定的图像，直到填充整个长度和宽度。

除了 stretch 和 repeat 之外，它还可以取 round 作为值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 25%;
            border-image-repeat: repeat;
            padding: 20px;
            width: 80%;
            margin: 10px 15px 60px;
        }
    </style>
</head>

<body>
    <div>
        Border Image Repeat
    </div>

    <div style="border-image-repeat: stretch;">
        Border Image Stretch
    </div>
</body>
</html>

边框图像简写属性

border-image 简写属性允许您在一个声明中设置与边框图像相关的所有属性。

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

以下示例演示了如何使用此属性。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div{
            background-color: #f0f0f0;
            border: 20px solid transparent;
            border-image: url('/css/images/border.png') 30 round;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            This is an example of border shorthand property....
        </p>
    </div>
</body>
</html>

CSS 渐变作为边框图像

CSS 渐变也可用于设置元素的边框。支持三种类型的渐变：线性、径向和圆锥形。