此 CSS 属性定义用作元素边框的图像。它在元素外绘制一个图像,并用相应的图像替换元素的边框。用图像替换元素的边框是一项有趣的任务。
当 border-collapse 设置为折叠时,border-image 属性可以应用于除内部表的元素(如 tr、th、td)之外的所有元素。
它是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 的简写属性。我们可以使用 border-image 属性一次设置所有这些属性。如果未指定任何值,则将它们设置为默认值。此属性的默认值为:
border-image:none 100% 1 0 stretch
用法
border-image:source slice width outset repeat | initial | inherit;
该属性的值如下表所示。
值 | 描述 |
---|---|
border-image-source: | 它指定 border-image 的来源。它设置图像的路径,或者我们可以说它指定要用作边框的图像的位置。 |
border-image-slice: | 它用于分割或切片图像,由 border-image-source 属性指定。此属性的值指定如何对图像进行切片以创建边框部分。此属性将图像分为九个部分,它们是:
|
border-image-width: | 它设置 border-image 的宽度。它可以接受无单位的正值、百分比值或关键字 auto。它的默认值为 1。我们最多可以指定四个值来提供各个边的宽度。 |
border-image-outset: | 它设置边框图像从其边框框中设置的空间量。 |
border-image-repeat: | 它控制图像的重复以填充边框区域。我们最多可以为此属性指定两个值。如果我们指定一个值,则它同时应用于垂直和水平两侧。但是如果我们指定两个值,那么第一个值应用于水平边,第二个值应用于垂直边。 下面列出了此属性的值。
|
Initial | 它将属性设置为其默认值 (border-image: none 100% 1 0 stretch )。 |
inherit | 它从其父元素继承属性。 |
现在,让我们看一些示例以了解如何使用 border-image 属性设置 border-image。
示例
在这个例子中,我们用图像替换段落元素的边框。在第一段中,我们指定了 border-image-repeat 属性的单个值(即圆形),而在第二段中,我们指定了它的两个值(圆形、拉伸),第一个值是水平边,第二个值是对于垂直边。
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border:10px solid transparent;
padding:15px;
text-align:center;
font-size:25px;
color:darkviolet;
}
#border {
border-image:url('border.png') 60 / 20px 20px round;
}
#border1 {
border-image:url('diamond.png') 43 / 10px 15px round stretch;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border">
Welcome to the javaTpoint.com
</p>
<p id = "border1">
Welcome to the javaTpoint.com
</p>
</body>
</html>
输出

我们还可以将渐变指定为边框图像。
示例 - 使用 linear-gradient
在本例中,我们使用 linear-gradient 和 repeating-linear-gradient 作为段落元素的边框图像。
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border:10px solid transparent;
padding:15px;
text-align:center;
font-size:25px;
color:darkviolet;
}
#border {
border-image:url('diamond.png') 40 round stretch;
}
#border1 {
border-image:linear-gradient(orange, yellow, green) 40 / 30px 10px stretch;
}
#border2 {
border-image:repeating-linear-gradient(50deg, blue, yellow, lightgreen 20px) 30 / 20px 30px round;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border">
Welcome to the javaTpoint.com
</p>
<p id = "border1">
Welcome to the javaTpoint.com
</p>
<p id = "border2">
Welcome to the javaTpoint.com
</p>
</body>
</html>
输出

示例 - 使用 radial-gradient
在本例中,我们使用 radial-gradient 作为段落元素的边框图像。
<!DOCTYPE html>
<html>
<head>
<title>
CSS border-image Property
</title>
<style>
p{
border:10px solid transparent;
padding:15px;
text-align:center;
font-size:25px;
color:darkviolet;
}
#border1 {
border-image:radial-gradient(circle, yellow, magenta, blue) 30 / 15px repeat;
}
#border2 {
border-image:radial-gradient(farthest-side, red, yellow, green) 30 / 15px round;
}
</style>
</head>
<body>
<h2>border-image property</h2>
<p id = "border1">
Welcome to the javaTpoint.com
</p>
<p id = "border2">
Welcome to the javaTpoint.com
</p>
</body>
</html>
输出

相关用法
- CSS border-image-repeat用法及代码示例
- CSS border-image用法及代码示例
- CSS border-image-source用法及代码示例
- CSS border-image-slice用法及代码示例
- CSS border-image-outset用法及代码示例
- CSS border-image-width用法及代码示例
- CSS border-inline-end-style属性用法及代码示例
- CSS border-inline用法及代码示例
- CSS border-inline-start-width属性用法及代码示例
- CSS border-inline-start-style属性用法及代码示例
- CSS border-inline-end-color属性用法及代码示例
- CSS border-inline-end用法及代码示例
- CSS border-inline-start-color属性用法及代码示例
- CSS border-inline-width用法及代码示例
- CSS border-inline-end-width属性用法及代码示例
- CSS border-inline-color用法及代码示例
- CSS border-inline-style用法及代码示例
- CSS border-inline-start用法及代码示例
- CSS - border-bottom-style用法及代码示例
- CSS border-end-start-radius属性用法及代码示例
注:本文由纯净天空筛选整理自 CSS border-image property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。