渐变弧形进度条的 CSS 实现 - 程序：为单个半圆设置边框

只要设置容器的 border，并且把 border-bottom 设置为空即可：

.container {
  width: 500px;
  height: 250px;
  box-sizing: border-box;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border: 25px solid tomato;
  border-bottom: none;
}

注意这里的容器是矩形区域，而不是半圆，你可能会这样设置（我就犯了类似的错误）：

.container {
  width: 500px;
  height: 250px;
  box-sizing: border-box;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-top: 25px solid tomato;
}

这是不对的，因为会得到下面的图案：

但是当需要设置渐变色的时候，卡住了，CSS 并没有提供一个能够为 border 设置渐变色的 API，唯一可以在 border 上做定制的是 border-image 属性，例如：

.container {
  width: 500px;
  height: 250px;
  box-sizing: border-box;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border: 25px solid tomato;
  border-bottom: none;
  border-image-source: linear-gradient(to right, tomato, blue);
  border-image-slice: 1;
}

然而非常遗憾的是，border-image 无法配合 border-radius 一起使用，最终得到的效果如下：

虽然渐变有了但圆角没了，也就是说，无法在半圆的边框上设置渐变色，于是这种方案只能被弃用了。