如何在CSS中添加边框渐变[+3工具]

CSS中的边框属性允许网页设计师指定元素边框的样式、宽度和颜色。

CSS中的渐变允许设计师在两种或多种颜色之间应用平滑的过渡。您可以使用渐变在网页上的元素上创建阴影、颜色混合和纹理等视觉效果。

边框渐变是一种CSS属性，允许开发人员将渐变应用于元素的边框。

渐变边框创建了一个视觉效果，边框的颜色从一种颜色变为另一种颜色。

为什么使用渐变边框？

渐变边框是CSS3中引入的各种样式特性之一。以下是您应该在下一个网页应用程序上使用它的一些原因：

• 渐变边框具有灵活性：您可以使用渐变边框创建复杂和分层的效果。这与固定颜色边框不同，后者是刚性的。因此，在处理需要细致的视觉设计的复杂布局或形状时，渐变边框非常有用。
• 增加视觉吸引力：使用渐变边框效果，您可以为设计添加引人注目的视觉效果。例如，您可以使用鲜明的颜色对比来吸引注意力到网页上的特定元素。
• 提供无缝集成：渐变边框可以让您将边框无缝地集成到元素的背景中。这种方法使您的网页看起来坚实而有凝聚力，展示出经过深思熟虑的设计。

如何在CSS中添加渐变边框

在演示如何添加渐变边框之前，我们可以演示如何向HTML元素添加边框。

我们可以使用以下代码：

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 purple边框。

我们可以使用渐变边框使边框更具吸引力。有不同的方法可以添加渐变边框。以下是一些主要方法：

使用渐变边框（线性渐变、径向渐变、圆锥渐变）

我们将演示使用三种不同方法使用渐变边框：

线性渐变

线性渐变在直线上创建两种或多种颜色之间的平滑过渡。我们可以使用以下代码来演示：

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

        径向渐变示意图

      

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

        锥形渐变示意图

      

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

        边框图像示意图

      

CSS

我们给border-width属性设置了宽度为15px，并将border-style设置为实线。

border-image-slice将边框框的宽度和高度分别设置为60％和30％。

渲染后的页面将显示如下：

使用简写属性

简写属性允许开发人员使用一行代码样式化多个单独的CSS属性。对于此示例，我们使用border-image来指定border-image-source和border-image-slice。

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边框渐变生成器-Unused CSS

该工具帮助开发人员生成可以应用于块元素的渐变边框，而无需创建伪元素或额外元素。

您可以执行以下操作：

在不同的渐变类型之间进行选择。使用此工具时，您可以轻松切换径向和线性渐变。

预览选项卡。该工具允许您在自定义时预览边框渐变在您的网页上的显示方式。

颜色停止。该工具使得很容易决定不同颜色的过渡如何发生。

边框大小自定义。您可以使用此工具轻松自定义边框大小和边框半径。

在生成的代码满意后，您可以复制并在项目中使用它。

3. 渐变边框生成器- Amit Sheen

该工具有八个不同的背景区域，使开发人员能够创建圆角渐变边框效果。

您可以实现以下效果：

• 创建渐变动画。该工具允许你生成在两种或多种颜色之间过渡的渐变动画。
• 可以包含JavaScript代码。如果你的可自定义元素需要JS代码，你可以从控制面板中找到并自定义它。
• 实时预览。您可以在自定义代码时查看对代码的更改。

在自定义边框渐变效果后，您可以复制粘贴代码，以满足您的喜好。

总结

在设计网页时，您可以使用上述任何方法来为您的元素添加渐变边框。选择的方法可能因个人偏好、技能水平和您正在样式化的元素的性质而有所不同。

您也可以在同一网页上为不同的元素使用不同的方法。

查看如何create a double border in CSS来改善您的网页视觉吸引力。