CSS中环形状的径向渐变

如何解决CSS中环形状的径向渐变

我想用径向渐变创建具有指定厚度（以px为单位）的“环形”形状。所需的结果是：

但是，我不知道如何以像素为单位指定厚度，以及如何确保颜色从绿色平滑过渡到透明（不截止）。我目前的状态是：

manager

div {
  background-image: radial-gradient(transparent,green,transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

有什么方法可以在HTML和CSS中进行制作，而无需使用canvas或svg（fiddle）。我无法使用图片，因为我想渲染此形状的不同宽度和厚度。

解决方法

您可以在此site中使用CSS径向渐变。

我实现了您想要的，这是demo。只需按百分比操作即可获得所需的输出。

import csv

# python3 manage.py runscript many_load

from unesco.models import Site,Category,Iso,Region,State


def run():
    fhand = open('unesco/load.csv')
    reader = csv.reader(fhand)
    next(reader)

    # Category.objects.all().delete()
    # Iso.objects.all().delete()
    # Region.objects.all().delete()
    # State.objects.all().delete()

    # Site.objects.all().delete()

    for row in reader:
        # print(row)
        # print (len(row))

        nm = row[0]
        dsc = row[1]
        jst = row[2]
        yr = row[3]
        lng = row[4]
        lat = row[5]
        area = row[6]

        category = Category.objects.create(category=row[7])
        state = State.objects.create(state=row[8])
        region = Region.objects.create(region=row[9])
        iso = Iso.objects.create(iso=row[10])

        st = Site(category=category,state=state,region=region,iso=iso,name=nm,area=area,describe=dsc,justify=jst,longitude=lng,latitude=lat)
        st.save()

div {
    background: radial-gradient(circle,rgba(0,128,0) 50%,1) 60%,0) 70%);
    width: 300px;
    height: 300px;
}

,

div {
  background-image: radial-gradient(transparent,transparent 100px,green 150px,transparent 200px,transparent);
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

<div></div>

我刚刚使用了一些随机的px值。根据需要对其进行编辑。这是Santax：radial-gradient(color width,color width,...)的宽度可以px，rem，％或任何CSS单位设置。

,

这是一个可以为您提供所需厚度50px的解决方案。您还可以将其设置为变量以根据需要进行调整：

.box {
  --t:50px;
  
  background:
    radial-gradient(farthest-side,transparent calc(100% - var(--t)),green,transparent 100%);
  display:inline-block;
  height: 250px;
  width: 250px;
}

<div class="box"></div>
<div class="box" style="--t:80px;"></div>
<div class="box" style="--t:100px"></div>

,

它不是完美的复制品，但足够接近。诀窍是使用遮罩。

div {
  border-radius:50%;
  background:linear-gradient(green,green);
  -webkit-mask: radial-gradient(transparent 330px,#000 90px);
          mask: radial-gradient(transparent 330px,#000 90px);
}
div:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>