CSS实现渐变圆环

CSS实现渐变圆环

今天呢，我们来讲讲使用CSS实现渐变圆环。

• linear-gradient实现

首先呢，我们的初步思维应该是画一个圆，通过背景色渐变来实现一个基本的圆形渐变，再定位一个纯色背景色的圆形覆盖在上一个圆形，来创建一个从视角上看起来是渐变的圆环。

代码如下：

<div class="circle">
    <div class="content"></div>
</div>

.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;
}

效果如下：

以上是给body设置了一个背景图片，又是我们就会有这样的需求，需要你做到透明，能看到背景图。

如果此时我们给子元素<div class="content"></div>的背景色设置为透明色的话，就会发现呈现的效果是一个渐变圆形而非圆环（如下图），所以此种方法实现不了我们想要的效果。

• CSS3 mask属性实现透明遮罩层

mask属性其实和background性质类似，以及他们的属性也都相似，比如mask-image、mask-position等

<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);
}

效果如下：

参考文献