CSS实现渐变圆环

.circle {
    width: 206px;
    height: 206px;
    border-radius: 50%;
    background: linear-gradient(0deg, #36A5ED 0%, #6EEE96 100%);
    position: relative;
}

.content {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: #fff;
}

<div class="circle"></div>
.circle {
    width: 206px;
    height: 206px;
    border-radius: 50%;
    background: linear-gradient(0deg, #36A5ED 0%, #6EEE96 100%);
    -webkit-mask: radial-gradient(transparent, transparent 97px, #000 97px);
    mask: radial-gradient(transparent 97px, #000 97px);
}