.linear{

    background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);

    background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);

    background-image:-o-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);

    background-image:linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);

}/*线性渐变*/

.radial{

    background-image:-webkit-radial-gradient( yellow, orange,red);

    background-image:-moz-radial-gradient( yellow, orange,red);

    background-image:-o-radial-gradient( yellow, orange,red);

    background-image:radial-gradient( yellow, orange,red);

}/*径向渐变*/

<style type="text/css">

html,body,ul,li,p{margin:0;padding:0;}

/*线性渐变:多色*/

.linear-white{background-image:linear-gradient(180deg, rgba(255,255,255,1),  rgba(255,255,255,0) 90%);}

.linear1{background-image:linear-gradient(180deg, red, orange,yellow,yellow,red);}

.linear2{background-image:linear-gradient(180deg, red, orange,yellow,green,blue,indigo,violet);}

/*径向渐变*/

.radial1{background-image:radial-gradient(at 50% 78%, yellow 8%, orange,red);}

.radial2{background-image:radial-gradient(at 50% 78%, #fea6fc 8%,#c95ceb ,#5b0491 );}

.radial3{background-image:radial-gradient(at 50% 78%, #5ebaf9 8%,#3871e3,#2244aa  );}

.radial4{background-image:radial-gradient(at 50% 78%, #e0f2fc 8%,#5baadc,#0f4e79  );}

.radial5{background-image:radial-gradient(at 50% 78%, #e9fcfc 8%,#a9beca,#465363  );}

.radial6{background-image:radial-gradient(at 50% 78%, #fafafa 8%,#b5b5b5,#888888  );}

.radial7{background-image:radial-gradient(at 50% 78%, #4dfd47 8%,#23e621,#028500  );}

.radial8{background-image:radial-gradient(at 50% 78%, #fefa68 8%,#feba22,#aa5600  );}

.img-circle{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}

.apple-btn{position:relative;width:100px;height:100px;margin:20px;float:left;}

.mask{position:absolute;top:5px;left:13px;right:13px;height:50px;}

.apple-btn p{position:absolute;color:#fff;top:50%;margin-top:-20px;font-size:32px;font-family:'Microsoft YaHei';width:100%;text-align:center;text-shadow:0 2px 5px #999;z-index:2;}

.clear{clear:both;}

</style>

<h1>线性渐变</h1>

<div class="apple-btn linear1 img-circle"><div class="mask linear-white img-circle"></div></div>

<div class="apple-btn linear2 img-circle"><div class="mask linear-white img-circle"></div></div>

<div class="clear"></div>

<h1>径向渐变</h1>

<div class="apple-btn radial1 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial2 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial3 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial4 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial5 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial6 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial7 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>

<div class="apple-btn radial8 img-circle"><div class="mask linear-white img-circle"></div><p>按钮</p></div>