在web設(shè)計中，圓形漸變非常常見，能夠為網(wǎng)頁增添一份柔和和柔美。而利用CSS做出圓形漸變也是非常簡單的。下面就來介紹一下利用CSS做圓形漸變的方法。

/*定義圓形的尺寸和位置*/
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 20px auto;
}
/*定義漸變*/
.gradient {
background: radial-gradient(circle, #ff6b6b, #a4508b);
}

       首先，在CSS中我們定義一個圓形的類circle，設(shè)定寬高為200px，邊框半徑為50%，并橫向居中。這樣就能保證生成的圓形是居中的。接下來，我們定義一個名為gradient的類，利用radial-gradient函數(shù)實現(xiàn)漸變。這個函數(shù)有兩個參數(shù)，第一個參數(shù)是表示形狀的，這里是circle，表示我們要實現(xiàn)的是一個圓形的漸變效果。第二個參數(shù)是兩種不同顏色的起點和終點。在這里我們使用了#ff6b6b和#a4508b兩個顏色值。在這個例子中，我們實現(xiàn)了從#ff6b6b到#a4508b的漸變。
       最后，我們把circle和gradient兩個類應(yīng)用到HTML中，該HTML代碼如下所示：

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

       此時，一個簡單的圓形漸變就完成啦！希望本篇文章對你有所幫助。