Css 简明教程

CSS - Border Image

出于简洁的目的，有一个设置边框图像的简写，即 border-image 。传递给简写 border-image 的值使用 solidus 符号（/）分隔。值应按特定顺序列出，即 slice ，然后 width ，最后 offset 。

Applies to

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

Syntax

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

注意：您还可以仅用一个值（例如 URL）来声明属性 border-image ，其他值将默认。

Example

我们看一个示例：

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

Overview

  1. 当 border-collapse 设置为 collapse 时，属性 border-image 可以应用于除内部表格元素（th、tr、td）之外的任何元素。

  2. border-image 简写属性唯一所需的属性是 border-image-source ，其他属性均为可选。

  3. 以下是 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 属性指定要作为元素的边框传入的图像源。

Syntax

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

border-image-slice

使用属性 border-image-slice 可以对使用属性 border-image-source 指定的图像进行分割。

该属性顾名思义，用于切割图像。它会将图像分成 9 个区域，即 4 个角、4 条边和一个中间区域。

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

border image slice

Note ： border-image-slice 的偏移可以通过百分比和长度单位来提供。但是，强烈建议使用百分比。

参考以下语法：

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

border-image-width

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

Syntax

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

border-image-outset

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

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

Syntax

   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 更改此设置。

此属性重复在边框侧面指定的图像，直到填充整个长度和宽度。

Syntax

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

它还可以取 round 的值，除了 stretch 和 repeat 。

CSS Gradient Border Images

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

Linear Gradient

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

Example

这是一个示例：

<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="images/orange-flower.jpg" alt="linear-gradient"/>
   </div>
</body>
</html>

Radial Gradient

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

Example

这是一个示例：

<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="images/orange-flower.jpg" alt="radial-gradient"/>
   </div>
</body>
</html>

Conic Gradient

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

Example

这是一个示例：

<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="images/orange-flower.jpg" alt="conic-gradient"/>
   </div>
</body>
</html>

所有与 border-image 相关的属性都列在下方表格中：