CSS实现渐变圆环

<div class="circle"> <div class="content"></div> </div> ```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; } ``` CSS3 mask属性实现透明遮罩层 ```css <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); } ```

• CSS,收藏
• 2022-08-31
• 评论
•   1135 次浏览