最终效果如下图：

纯css怎么搞出这么个圆环渐变效果呢？再进一步可以搞成圆边是虚线么？

AI BotBETA

要实现纯CSS的圆环渐变效果，并进一步将圆边设置为虚线，你可以使用以下CSS代码：

.gradient-circle {
width: 200px; / 根据需要调整大小 /
height: 200px; / 根据需要调整大小 /
border-radius: 50%;
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
position: relative;
}

.gradient-circle::before {
content: '';
position: absolute;
top: 10px; / 根据需要调整虚线圆环的厚度 /
left: 10px; / 根据需要调整虚线圆环的厚度 /
right: 10px; / 根据需要调整虚线圆环的厚度 /
bottom: 10px; / 根据需要调整虚线圆环的厚度 /
border-radius: 50%;
border: 2px dashed #000; / 虚线颜色和宽度 /
background: white; / 覆盖内部渐变，确保虚线效果 /
pointer-events: none; / 确保不影响内部元素的点击事件 /
}


HTML 结构：


解释：
1. `.gradient-circle` 类创建了一个圆形元素，并使用 `conic-gradient` 实现了圆环渐变效果。
2. `.gradient-circle::before` 伪元素用于创建虚线圆环效果。通过设置 `position: absolute` 和适当的 `top`, `left`, `right`, `bottom` 值，以及 `border-radius: 50%`，可以确保伪元素是一个稍小的圆形。
3. `border: 2px dashed #000` 设置了虚线的样式、宽度和颜色。
4. `background: white` 确保伪元素覆盖在渐变圆环上，只显示虚线边框。

你可以根据需要调整这些值，以达到所需的视觉效果。

2 个回答

发布于
11 月 27 日陕西

网上找到个答案
https://segmentfault.com/a/1190000043622887

.l{
    width: 200px;
    height: 200px;
    background: radial-gradient(closest-side circle, royalblue 70%, transparent 73%) center top / 6% 6% no-repeat, conic-gradient(transparent 3%, royalblue 101%);
    -webkit-mask: radial-gradient(closest-side circle, transparent 90%, red -24% 99%, transparent 22%);
    transform: rotateY(180deg);
}