综合--渐变圆环

效果图：

 

.cycle { width:100px; height:100px; -webkit-transform:rotate(90deg);}
.cycle:before {
    content:""; 
    display:block; 
    width:100px;
    height:50px; 
    margin-top:5px; 
    padding:5px; 
    padding-bottom:0; 
    box-sizing:border-box;
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    background:-webkit-gradient(linear,left top,right top,color-stop(0,#fff), color-stop(1,#fff)),
                -webkit-gradient(linear,left top, right top,color-stop(0,#077df8), color-stop(1,#74baff));
    background-clip:content-box,padding-box;
}
.cycle:after {
    content:""; 
    display:block; 
    width:100px;
    height:50px; 
    padding:5px; 
    padding-top:0; 
    box-sizing:border-box;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
    background:-webkit-gradient( linear, left top, right top, color-stop(0,#fff), color-stop(1,#fff)),
                -webkit-gradient( linear,left top, right top, color-stop(0,#fff), color-stop(1,#74baff));
    background-clip:content-box,padding-box;
}

 

转载于:https://www.cnblogs.com/luwanying/p/10571924.html