底部边框中的部分颜色以显示进度条

Question

有没有一种方法可以使用线性渐变来设置双色底部边框，以便将其用作进度条？想想Safari在网站加载时显示进度条的方式。

我们可以使用background来实现：

    background-image: linear-gradient(90deg, green 10%, red 0%, red 100%);

这将生成一个10%绿色和90%红色的div。是否可以在div的底部边框上使用类似的技术？另外，这个底部边框的宽度是否可以控制为3px？

Answer 1

我更愿意为它创建一个元素，但您可以这样做：

请不要使用绿色和红色，因为色盲问题。

​

body {
  margin: 0;
  padding: 0;
}

header {
  --progress: 10%;

  background-color: khaki;
  height: 3rem;
  border-bottom: 3px solid;
  
  border-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%) 1;
}

<header></header>

​

编辑我可以添加如何设置带有伪元素的进度条。我更喜欢使用两个(一个作为背景，另一个作为进程)，这样更容易将进程动画化。

添加了一个范围输入，使其更具交互性。

​

let headerElements = document.querySelectorAll('header');

function updateHeaders(value) {
  headerElements.forEach((header) => {
    header.style.setProperty('--progress', value + "%");
  });
}

body {
  --primary-color: lightblue;
  
  margin: 0;
  padding: 0;
}

header {
  --progress: 30%;

  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  
  /* RELEVANT CSS */
  position: relative;
}

  /* RELEVANT CSS */
header.progressbar::before,
header.two.pseudo-elements.progressbar::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
}

header.one.pseudo-element.progressbar::before {
  background-image: linear-gradient(90deg, green var(--progress), red 0%, red 100%);
}

header.two.pseudo-elements.progressbar::before {
  z-index: 2;
  right: initial;
  width: var(--progress);
  background-color: green;
  transition: width 300ms linear;
}

header.two.pseudo-elements.progressbar::after {
  z-index: 1;
  background-color: red;
}

/* PLACEHOLDER CSS BELOW */
input[type="range"] {
  margin: 1rem 0px;
  width: 100%;
}

div[title="Logotype"] {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Verdana";
  font-size: 36px;
  padding: 0.25rem;
  margin: 0.5rem;
  background-color: white;
  border-radius: 50%;
}

header > a {
  padding: 0px 0.5rem;
  color: #121212;
}

<h3>One pseudo-element</h3>
<header class="one pseudo-element progressbar">
  <div title="Logotype">L</div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</header>

<h3>Two pseudo-elements</h3>
<header class="two pseudo-elements animate progressbar">
  <div title="Logotype">L</div>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</header>

<input type="range" oninput="updateHeaders(this.value)" value="30" />

​