CSS 中的 border 属性允许网页设计者指定元素边框的样式、宽度和颜色。
在 CSS 中，渐变允许设计人员在两种或多种颜色之间应用平滑过渡。 您可以使用渐变在网页上的元素上创建视觉效果，例如阴影、颜色混合和纹理。
边框渐变是一种 CSS 属性，允许开发人员将渐变应用于元素的边框。
渐变边框创建一种视觉效果，其中边框的颜色从一种颜色变为另一种颜色。
为什么要使用渐变边框？
边框渐变是 CSS3 中引入的各种样式功能之一。 这些是您应该在下一个网络应用程序中使用它的一些原因：
- 边框渐变非常灵活：您可以使用渐变边框创建复杂的分层效果。 这与刚性的纯色边框不同。 因此，在处理需要细微视觉设计的复杂布局或形状时，渐变边框非常有用。
- 创建视觉吸引力：使用渐变边框效果，您可以为您的设计添加引人注目的视觉效果。 例如，您可以使用大胆的颜色对比来帮助将注意力吸引到网页上的特定元素。
- 提供无缝集成：渐变边框允许您将边框无缝集成到元素的背景中。 这种方法使您的网页具有坚实而有凝聚力的外观，显示出经过深思熟虑的设计。
如何在 CSS 中添加边框渐变
在我们演示如何添加边框渐变之前，我们可以说明如何向 HTML 元素添加边框。
我们可以使用这段代码；
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
呈现的页面将显示为：
上面的代码虽然有边框，但是没有那么吸引人，因为它是空白的。 我们的 div 周围只有一个 5px 的实心 Rebecca 紫色边框。
我们可以使用边框渐变使我们的边框更具吸引力。 存在添加边框渐变的不同方法。 以下是一些主要的：
使用渐变边框（线性渐变、径向渐变、圆锥渐变）
我们将说明如何以三种不同的方式使用渐变边框：
线性渐变
线性渐变在直线上的两种或多种颜色之间创建平滑过渡。 我们可以用下面的代码来演示：
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
我们已将边框样式指定为实线，这意味着框周围的边框是实线。 我们代码中的边框宽度是 10px。
线性渐变以“rgb(143, 55, 0)”开始，以“rgb(66, 228, 250)”结束。 我们还指定了 45 度角。 边界图像切片的宽度设置为“1”。
呈现的页面将显示为：
径向渐变
径向渐变创建从中心点辐射的圆形渐变，允许用户在网页元素中从一种颜色过渡到另一种颜色。
我们可以说明如何使用此代码添加径向渐变：
HTML
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
我们已将元素的边框样式设置为实心。 我们还给边框设置了 5px 的边框宽度。
径向渐变以深绿色 RGB(0,143,104) 开始，以亮黄色结束，用 rgb(250,224,66) 表示。
代码末尾的“1”代表 border-image-repeat 属性。 该值指示浏览器仅在元素边框周围重复一次边框图像。
呈现的页面将显示为：
锥形渐变
圆锥渐变创建圆形颜色过渡。 在这个效果中，过渡从一个中心点开始，然后向外扩散，形成一个圆形的效果。
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
在这段代码中，我们将边框样式设置为纯色，并为边框设置 7.5px 的宽度。 border-image 属性设置边框渐变。 有七种颜色，从红色开始到 rgb(255, 0, 38) 结束。
代码末尾的图“1”给出了 1 个像素的边框宽度。
呈现的页面将显示为：
使用边框图像
边框图像取代了 HTML 元素的标准实心边框。 边框图像用于创建复杂的设计，而不是组合颜色来创建边框渐变。
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
我们给 border-width 属性设置了 15px 的宽度，并将 border-style 设置为 solid。
border-image-slice 将边框框的宽度和高度分别设置为 60% 和 30%。
呈现的页面将显示为：
使用速记属性
速记属性允许开发人员使用一行代码设置多个单独的 CSS 属性的样式。 对于这种情况，我们使用 border-image 来指定 border-image-source 和 border-image-slice。
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
呈现的页面将显示为：
CSS 边框渐变生成器
CSS 边框渐变生成器帮助开发人员在网页上的元素上添加渐变效果。 这些生成器允许您调整设置，这意味着您不必从头开始创建所有内容。 以下是您可以使用的一些工具：
#1。 CSS 渐变生成器-转换颜色
Converting Colors 允许您生成最多五种颜色的线性或径向渐变 CSS 代码。 您生成的 CSS 渐变代码可用作元素的边框或背景图像。
您可以使用此生成器执行以下操作；
- 选择最多五种颜色并在边框渐变中使用它们。
- 选择渐变的方向。 该工具具有线性和径向渐变。
- 您可以使用色标功能决定颜色的过渡方式。
完成试验并生成代码后，您可以复制并在您的网站上使用它。
#2。 CSS边框渐变生成器-未使用的CSS
Unused-CSS 帮助开发人员生成渐变边框，他们可以将这些边框应用于块元素，而无需创建伪元素或额外元素。
您可以执行以下操作；
- 在不同的渐变类型之间进行选择。 使用此工具时，您可以轻松地在径向渐变和线性渐变之间切换。
- 预览选项卡。 该工具可让您在自定义时预览边框渐变在网页上的显示方式。
- 颜色停止。 该工具可以轻松决定不同颜色的过渡方式。
- 边框尺寸定制。 您可以使用此工具轻松自定义边框大小和边框半径。
一旦您对生成的代码感到满意，您就可以复制并在您的项目中使用它。
#3。 渐变边框生成器 – Amit Sheen
该工具有八个不同的背景区域，使开发人员能够创建圆角渐变边框效果。
您可以实现以下目标；
- 创建渐变动画。 该工具允许您生成在两种或多种颜色之间过渡的渐变动画。
- 您可以包含 JavaScript 代码。 如果您的可自定义元素需要 JS 代码，您始终可以从控制面板中找到并自定义它。
- 实时预览。 您可以在自定义代码时查看对代码的更改。
您可以根据自己的喜好自定义边框渐变效果后复制粘贴代码。
结论
在设计网页时，您可以使用上述任何一种方法为您的元素添加渐变边框。 方法的选择可能会因偏好、技能水平和您设计的元素的性质而异。
您还可以对同一网页上的不同元素使用不同的方法。
查看如何在 CSS 中创建双边框以提高网页的视觉吸引力。
