Css 简明教程
CSS - Border Image
出于简洁的目的，有一个设置边框图像的简写，即 border-image 。传递给简写 border-image 的值使用 solidus 符号（/）分隔。值应按特定顺序列出，即 slice ，然后 width ，最后 offset 。
For brevity purpose, there is a shorthand for setting up of border image, i.e., border-image. The values passed to shorthand border-image are separated using the solidus symbol (/). The values should be listed in a specific order, which is slice, then width and last is offset.
Syntax
border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;注意：您还可以仅用一个值（例如 URL）来声明属性 border-image ，其他值将默认。
Note: You can also declare the property border-image with just one value i.e., URL and rest of the values will be default.
Example
我们看一个示例：
Let us see an 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
-
The border-image property can be applied to any element, except for the internal table elements (th,tr,td), when border-collapse is set to collapse.
-
Only required property for border-image shorthand property is, border-image-source, rest other properties are optional.
-
Following are the properties of border-image shorthand, in their order: border-image-source: Specifies the source of border-image. Can be a URL, CSS gradient or inline SVG. border-image-slice: Allows the slicing up of image by the browser. border-image-width: Sets the width of the border image. border-image-outset: Pushes the border image outside, beyond the border box. border-image-repeat: Repeats the image specified along the sides of the border, until the whole length and width is filled.
border-image-source
border-image-source 属性指定要作为元素的边框传入的图像源。
The border-image-source property specifies the source of an image to be passed as a border to an element.
border-image-slice
使用属性 border-image-slice 可以对使用属性 border-image-source 指定的图像进行分割。
The image specified using the property border-image-source can be sliced using the property border-image-slice.
该属性顾名思义，用于切割图像。它会将图像分成 9 个区域，即 4 个角、4 条边和一个中间区域。
As the name suggests, this property is used to slice up an image. It divides the image in 9 regions, with 4 corners, 4 edges and a middle region.
下图演示了属性 border-image-slice 的功能：
The following diagram demonstrates function of border-image-slice property:
Note ： border-image-slice 的偏移可以通过百分比和长度单位来提供。但是，强烈建议使用百分比。
Note: Offset for border-image-slice can be provided in terms of percentage and length units. But, percentages are highly recommended.
参考以下语法：
Refer the following syntax for example:
border: 20px solid;
border-image-source: url('URL');
border-image-slice: 25%;border-image-width
要指定要作为边框设置的图像的宽度，可以使用属性 border-image-width 。
To specify the width of the image to be set as a border, you can use the property 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 。
In order to avoid the overlapping of the image borders and the content, you can use the property border-image-outset.
此属性将边框图像推到外部，超出边框框。
This property pushes the border image outside, beyond the border box.
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 更改此设置。
By default the border image gets stretched along the sides, but this can be changed, using the property border-image-repeat.
此属性重复在边框侧面指定的图像，直到填充整个长度和宽度。
This property repeats the image specified along the sides of the border, until the whole length and width is not filled.
CSS Gradient Border Images
CSS 渐变也可用于设置元素的边框。支持三种类型的渐变：线性、径向和圆锥。
CSS gradients can also be used to set the border of an element. Three types of gradients are supported: linear, radial and conic.
Linear Gradient
线性渐变用于在沿直线的两个或多个颜色之间设置平滑过渡，同样的也可以用作元素周围的边框。
A linear gradient is used to set a smooth transition between two or more colors along a straight line and the same can be used as a border around an element.
Example
这是一个示例：
Here is an 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
径向渐变用于在从其原点辐射出的两个或多个颜色之间设置渐进过渡。
A radial gradient is used to set a progressive transition between two or more colors that radiate from its origin.
Example
这是一个示例：
Here is an 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
圆锥渐变有助于创建由围绕中心点旋转的颜色过渡组成的图像，而不是从中心辐射。
A conic gradient is helpful in creating an image consisting of color transitions rotated around a center point, rather than radiating from the center.
Example
这是一个示例：
Here is an 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 相关的属性都列在下方表格中：
All the properties related to border-image are listed in the table below: