如何在css中使用渐变的半圆边框[重复]答案

【问题标题】：How do half circle border with gradient in css [duplicate]如何在css中使用渐变的半圆边框[重复]
【发布时间】：2021-05-14 15:55:59
【问题描述】：

我想做半圈（9 点到 3 点）。颜色从9点到3点开始，绿色慢慢变成红色。

这可以在css中实现吗？

下面的圆圈与我想要的有点偏离。开始时 9 点和 3 点的颜色会变淡，圆圈中间的颜色会变绿。

绿色应该从 9 点开始，慢慢变成红色。

.rounded {
  width: 300px;
  height: 300px;
  border: 10px solid transparent;
  border-radius: 150px;
  background-image: linear-gradient(white, white), linear-gradient(.50turn, green, red, white 50%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

#parent {
  display: flex;
  width: 100vw;
  justify-content:center;
}

<div id="parent">
  <div class="rounded"></div>
</div>

【问题讨论】：

也许是径向渐变？
@j08691 不应该在径向渐变中做到这一点。内圈应为白色。它看起来就像我展示的示例。但是开始和结束的网站颜色会褪色。
尝试左上角和右上角的半径值w3schools.com/cssref/css3_pr_border-top-left-radius.asp
@LoveenDyall 这样可以在边框做渐变色吗？
你可以使用 background-clip 我认为有一些浏览器支持它。或者您可以使用 overflow:hidden 使背景保持在边框内

标签： css gradient

【解决方案1】：

#cont {
  background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
  width: 300px;
  height: 300px;
  border-radius: 1000px;
  padding: 10px;
}

#box {
  background: black;
  width: 300px;
  height: 300px;
  border-radius: 1000px;
}

<div id="cont">
  <div id="box"></div>
</div>

【讨论】：

不完全是结果。我只需要一半，从 9 到 3 开始颜色