使用 CSS 创建多色边框

已发表: 2022-02-16

CSS 边框属性确实有一些自定义选项，例如实心、虚线、点线等选项。但是，当涉及到边框颜色时，我们只能每边有一个纯色。 但是，还有另一种方法可以使用您可能没有想到的更多属性来实现多色线，让我们来看看。

坚硬的

固体硼

虚线

破折号

点缀

虚线

多色边框

多色bor1

多色bor2

为了实现如上所示的多色边框，我们将使用position属性和带有颜色渐变的::after选择器。 首先，我们将使用 HTML <div> 类创建一个标题区域，然后我们将使用 CSS 对其进行样式设置，以使用多色边框将其与下面的内容分开。

创建您的 HTML：

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
在弹出窗口中打开
<div class="ost-multi-header"> <h1> Header Title </h1> </div>

现在，让我们使用 CSS 对其进行一些样式设置。

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
在弹出窗口中打开
h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

您现在应该有如下所示的内容：

使用 CSS 创建多色边框

有了它，我们现在可以将::after添加到.ost-multi-header selector 。 但是，在我们开始之前，我想解释一下::after的作用以及为什么我们需要多色边框的 position 属性。 ::after使用所选元素末尾的 content 属性中的任何内容创建一个伪元素。 在我们的例子中，该元素是.ost-multi-header 。 让我们做一个历史悠久的“Hello World！” 举例来说明。

将此添加到您的 CSS 中：

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
在弹出窗口中打开
.ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbor

如您所见，我们现在有一个“Hello World！” 标题下方的元素。 因为我们的父元素.ost-multi-header的 position 属性是relative ，所以我们可以给子元素一个absolute位置。 这将使我们可以轻松地将使用::after创建的新伪元素移动到父元素中任何我们喜欢的位置。 我们把它放在底部，并在父元素内从左侧移动 20 像素。 注意，如果父元素没有将 position 属性设置为 relative，那么我们的绝对定位元素将位于浏览器视口的底部和左侧 20px 处。

我们的彩色边框呢？ 我们将使用渐变将伪元素的背景设置为多色边框。 CSS 渐变可以是线性的或径向的。 对于我们的边框，我们将使用linear-gradient 。 很简单，这将为我们提供我们所寻求的边界。

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
在弹出窗口中打开
.ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

但是，让我们慢慢来一步一步。 首先， content属性仍然存在，即使它是空白的。 这是因为，如果没有content属性，就永远不会创建伪元素； 所以，我们需要它。 我们需要设置伪元素的高度，即边框高度。 为什么要将left和right属性都设置为 0？ 如果没有设置宽度，这会将伪元素拉伸到父元素内的 100% 宽度。 它可能看起来很多，但linear-gradient设置只是告诉颜色从左“向右”流动，我们在特定百分比的背景中放入我们想要的颜色。

尽管我们所做的只是选择特定百分比的颜色，但这需要大量的工作。 幸运的是，有免费的在线资源可以极大地帮助处理颜色渐变。 ColorZilla的Ultimate CSS Gradient Generator是一个很棒的工具，它包含多个用于支持旧浏览器的渐变属性。

我们已经在工具上设置了渐变，因此我们可以使用此链接查看本教程中使用的确切设置：https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100。 它应该如下所示：

使用 CSS 创建多色边框

这个网站上有很多设置，但让我们专注于我们需要哪些设置来创建我们将用于我们的边框的外观。 让我们分解一下：

使用 CSS 创建多色边框

  1. 预设- 这些可能是一个很好的起点！
  2. 滑块- 您可以在此处添加、删除和编辑颜色
  3. 停止- 此部分允许您更改每种颜色的不透明度和位置的设置。 只需单击上面滑块上的颜色框即可更改您在此部分中控制的颜色框。
  4. 预览- 在这里您可以立即看到更改的结果。
  5. 方向和大小- 这允许您从水平、垂直、对角线或径向进行更改。 并设置渐变的大小。
  6. CSS 代码- 生成的带有永久链接的代码，因此您可以随时返回并轻松编辑渐变。

在我们的例子中，我们不是在寻找渐变的渐变，而是在两种颜色之间寻找一个纯平的过渡，所以我们所要做的就是在我们希望发生这种情况的地方将两种颜色堆叠在一起。 在我们的示例中，我们分别以 33% 和 66% 的比例堆叠颜色。

使用 CSS 创建多色边框

随意尝试设置，知道您在预览中看到的是代码将生成的内容。 当您按照您想要的方式设置外观时，您可以使用代码框右下方的“复制”按钮。

毕业拷贝

如果您复制了我在链接中的代码，您的最终 CSS 将如下所示：

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
在弹出窗口中打开
h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

而且，该 CSS 将生成完全响应的多色下划线：

使用 CSS 创建多色边框

我们去吧！ 我们不必在.ost-multi-header的底部添加 6px 填充，但是absolute定位的子元素不再影响父元素的高度。 我们可以让它漂浮在父元素中的内容之上，或者添加padding以确保它不会覆盖我们可能不想被阻碍的任何内容。

这是在 CodePen 上重新创建的此练习的链接，供大家编辑和学习，无需担心。

最后一点，一些较旧的浏览器仅支持单冒号:after选择器，而不支持现代标准双::after 。 如果您希望安全，可以使用单冒号。 它现在也可以在现代浏览器中使用。