如何用CSS制作带渐变边框的透明中心圆形？

原生border-color不支持渐变属性，我们可以通过背景渐变+背景裁剪的方案实现需求，无需嵌套div，同时保持中心区域透明：

最终代码 #

<div id="circle" style="
  width: 500px;
  height: 500px;
  border: 10px solid transparent; /* 定义边框宽度，设为透明预留显示区域 */
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  /* 圆锥渐变：沿右上90度圆弧实现gold→black→red过渡，其余区域设为透明 */
  background-image: conic-gradient(from 0deg, gold 0deg, black 45deg, red 90deg, transparent 90deg);
  background-clip: border-box; /* 限制渐变仅在边框范围内显示 */
"></div>

核心逻辑说明 #

• border: 10px solid transparent：先定义边框宽度并设为透明，预留出边框的占位区域，后续渐变只会填充这个区域。
• conic-gradient：使用圆锥渐变适配圆形边框的弧度，from 0deg表示从右侧起始，0deg-90deg对应右上四分之一圆弧，在这个区间设置颜色过渡，剩余角度设为透明避免其他区域显示渐变。
• background-clip: border-box：将渐变的显示范围限制在边框区域内，中心内容区域保持透明，完全符合需求。

自定义调整 #

• 修改边框宽度：直接调整border属性的数值即可（比如改成20px）。
• 调整渐变效果：修改conic-gradient中的颜色值和角度节点，比如把black 45deg改为blue 60deg，就能调整过渡位置和颜色。

内容的提问来源于stack exchange，提问作者qwerty_99