CSS border-image 属性 设置边框图像的。传递给 border-image 的值使用斜线符号 (/) 分隔。这些值应按特定顺序列出，切片，宽度，最后是偏移量。

适用范围

所有 HTML 元素，内部表格元素除外。

语法

border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;

注意:您还可以仅使用一个值来声明 border-image 属性，即 URL 和其余值将采用默认值。

示例

让我们看一个例子:

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      border: 20px solid;
      border-image: url(/css/images/border.png) 30 round;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

概述

  • border-image 属性可以应用于任何元素，除了对于内部表格元素 (th,tr,td)，当 border-collapse 设置为折叠时。

  • border-image 速记属性唯一需要的属性是 border-image -source、rest 其他属性是可选的。

  • 以下是 border-image 简写的属性，按顺序排列:

    • border-image-source:指定边框图像的来源。可以是 URL、CSS 渐变或内联 SVG。

    • border-image-slice:允许浏览器对图像进行切片。

    • border-image-width:设置边框图像的宽度。

    • border-image-outset:将边框图像推到边框之外。

    • border-image-repeat:沿边框两侧重复指定的图像，直到填满整个长度和宽度。

border-image-source

border-image-source 属性指定要作为边框传递给

语法

border: 10px solid; border-image-source: url('URL');

border-image-slice

使用属性 border-image-source 指定的图像可以使用属性 border-image 进行切片。

顾名思义，该属性用于对图像进行切片。它将图像划分为 9 个区域，其中有 4 个角、4 个边缘和一个中间区域。

下图演示了 border-image-slice 属性的功能:

CSS 图像边框

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

例如，请参考以下语法:

border: 20px solid;
   border-image-source: url('URL');
   border-image-slice: 25%;

border-image-width

指定图像的宽度设置为边框，可以使用属性border-image-width。

语法

border: 20px solid;
   border-image-source: url('URL');
   border-image-width: 15px;
   border-image-slice: 33.33%;

border-image-outset

为了避免重叠图像边框和内容，您可以使用属性 border-image-outset。

此属性将边框图像推到边框之外，超出边框框。

语法

border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-width: 1;
   border-image-slice: 10;
   border-image-outset: 8px;

border-image-repeat

默认情况下，边框图像沿两侧拉伸，但可以使用属性 border-image-repeat 进行更改。

该属性重复沿着边框两侧指定的图像，直到整个长度和宽度都没有被填满。

语法

border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-repeat: repeat;

它也可以将值取为圆形，除了拉伸并重复。

CSS 渐变边框图像

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

线性渐变

线性渐变用于设置两种或多种颜色之间沿直线和轮廓的平滑过渡。同样可以用作元素周围的边框。

示例

这里是一个示例:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.with-linear-gradient {
      border-style: solid;
      border-width: 20px;
      border-image: linear-gradient(45deg, rgb(15, 64, 161), rgb(228, 6, 17)) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="with-linear-gradient" src="/css/images/orange-flower.jpg" alt="linear-gradient"/>
   </div>
</body>
</html>

径向渐变

径向渐变用于设置从其原点辐射的两种或多种颜色之间的渐进过渡。

示例

这里是一个示例:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.with-radial-gradient {
      border-style: solid;
      border-width: 10px;
      border-image: radial-gradient(rgb(58, 61, 60), rgb(47, 227, 221)) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="with-radial-gradient" src="/css/images/orange-flower.jpg" alt="radial-gradient"/>
   </div>
</body>
</html>

圆锥渐变

圆锥渐变有助于创建由围绕中心点旋转的颜色过渡组成的图像，而不是从中心辐射。

示例

这里是一个示例:

<html>
<head>
<style>
   img {
      height: 300px;
      width: 300px;
   }
   img.with-conic-gradient {
      border-style: solid;
      border-width: 15px;
      border-image: conic-gradient(red, yellow, green, aqua, blue, pink, red) 1;
   }
</style>
</head>
<body>
   <div>
      <img class="with-conic-gradient" src="/css/images/orange-flower.jpg" alt="conic-gradient"/>
   </div>
</body>
</html>

所有与border-image相关的属性如下表所示:

编号属性描述
1border-image用于设置边框图像的简写属性。
2border- image-outset设置图像开始，即边框图像区域超出边框框的程度。
3border-image-repeat确定边框图像是否应重复、圆角、间隔或拉伸。
4border-image-source设置要作为元素边框传递的图像的源/路径。
5border-image-slice显示如何在边框中分割图像。
6border-image-width设置要设置为边框的图像的宽度。