当前位置: 首页>>编程示例 >>用法及示例精选 >>正文


CSS border-image属性用法及代码示例

此 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 属性指定。此属性的值指定如何对图像进行切片以创建边框部分。此属性将图像分为九个部分,它们是:
  • 四个角
  • 四边,和
  • 一个中心区域
它可以接受四个无单位的正值。它的默认值为100%
border-image-width: 它设置 border-image 的宽度。它可以接受无单位的正值、百分比值或关键字 auto。它的默认值为 1。我们最多可以指定四个值来提供各个边的宽度。
border-image-outset: 它设置边框图像从其边框框中设置的空间量。
border-image-repeat: 它控制图像的重复以填充边框区域。我们最多可以为此属性指定两个值。如果我们指定一个值,则它同时应用于垂直和水平两侧。但是如果我们指定两个值,那么第一个值应用于水平边,第二个值应用于垂直边。
下面列出了此属性的值。
  • stretch
  • repeat
  • round
  • space
此属性的默认值为拉伸。
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>

输出

CSS border-image property

我们还可以将渐变指定为边框图像。

示例 - 使用 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>

输出

CSS border-image property

示例 - 使用 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 property



相关用法


注:本文由纯净天空筛选整理自 CSS border-image property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。