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

效果如下:

在这里插入图片描述

参考文献

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐