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

Question

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

我们可以使用背景：

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

这将生成一个10%绿色和90%红色的div。类似的技术可以用于div的底部边界吗？此外，这个底部边界的宽度可以控制为3倍吗？

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>

[EDIT]我可以添加如何使用伪元素设置进度条。我更喜欢使用两个(一个作为背景，另一个作为进度(，这样更容易设置进度动画。

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

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" />