徑向漸變radial-gradient(shape size at position, start-color, ... , end-color)

• shape：確定圓的類型。默認(rèn)為橢圓形ellipse，也可設(shè)置為圓形circle。可通過at指定起始點位置。
• size：定義漸變的大小，指定徑向漸變的半徑長度。默認(rèn)為farthest-corner從圓心到離圓心最遠的角；closest-side從圓心到離圓心最近的邊；farthest-side、closest-corner。
• position：定義漸變的位置。與background-position 或者transform-origin類似。如缺省，默認(rèn)為中心點。

1.漸變的起始位置，默認(rèn)為中心點：

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle, red, green, rgba(43,130,255,0.4));
}

image.png

使用at設(shè)置漸變的起始位置。以左上角作為坐標(biāo)原點。

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 50px 50px, red, green, rgba(43,130,255,0.4));
}

image.png

也可用%設(shè)置

.radial-gradient{
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 30% 50%, red, green, rgba(43,130,255,0.4));
}

image.png

2.指定漸變顏色斷點。默認(rèn)顏色是均勻分布在0 - 100%區(qū)域的。

background: radial-gradient(circle, red, green, blue, red);

0 - 25%: red; 25% - 50%: green; 50% - 75%: blue; 75% - 100%: red;

顏色均勻分布

設(shè)置斷點后的效果。

  background: radial-gradient(circle, red, green 10%, blue 40%, red);

0 - 10%: red; 10% - 40%: green; 40% - 100%: 均勻的分布 bule 和 red

按設(shè)置的斷點分布.png

??

下邊是使用徑向漸變radial-gradient來實現(xiàn)的。

<div class="radial-gradient"></div>

.radial-gradient{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
}

先設(shè)置圓的背景色漸變，設(shè)置了漸變的起始位置，漸變的顏色。

漸變背景色.png

然后通過偽類給圓的右上角再次設(shè)置白色的漸變背景色，使視覺效果更立體。（具怎么設(shè)置取決于設(shè)計）

.radial-gradient:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
} 

右上角設(shè)置漸變

同樣，給左下角設(shè)置漸變。（取決于設(shè)計）

.radial-gradient:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

徑向漸變實現(xiàn)的球體.png

下邊是給球體加了動畫：

<div class="radial-gradient1"></div>
<div class="radial-gradient2"></div>

.radial-gradient1{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
  animation: bubble-anim 5s linear infinite
}

@keyframes bubble-anim{
  0% {top: 0; left: 5%}
  10% {top: 10%; left: 10%}
  20% {top: 20%; left: 15%}
  30% {top: 30%; left: 20%}
  40% {top: 40%}
  50% {top: 50%}
  60% {top: 60%}
  70% {top: 70%}
  80% {top: 80%}
  90% {top: 90%}
  100% {top: 100%; left: 30%}
}

.radial-gradient1:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 180% -100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
} 

.radial-gradient1:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 10% 190%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

.radial-gradient2{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(240,245,255, 0.9), rgba(240,245,255, 0.9) 40%, rgba(225,238,255,0.8) 60%, rgba(43,130,255,0.4));
  animation: bubble-anim2 5s linear infinite
}

@keyframes bubble-anim2{
  0% {bottom: 0}
  10% {bottom: 10%; left: 10%}
  20% {bottom: 20%; left: 20%}
  30% {bottom: 30%; left: 30%}
  40% {bottom: 45%; left: 40%}
  50% {bottom: 50%; left: 50%}
  60% {bottom: 65%; left: 60%}
  70% {bottom: 75%; left: 70%}
  80% {bottom: 80%}
  90% {bottom: 90%}
  100% {bottom: 100%; left: 50%}
}

.radial-gradient2:before {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 10% -120%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
} 

.radial-gradient2:after {
  top: 0;
  width: 180px;
  height: 180px;
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 180% 100%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 46%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.8) 58%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%)
}

練習(xí)：
徑向漸變實現(xiàn)內(nèi)陷半圓：

div {
    width: 520px;
    height: 172px;
    background: #58a;
    background: radial-gradient(circle at 500px 0, transparent 15px, #58a 16px) center top,
    radial-gradient(circle at 500px 86px, transparent 15px, #58a 16px) center bottom ;
    background-size: 100% 50%; 
    background-repeat: no-repeat;    
}

image.png

參考文章：
你想不到的！CSS 實現(xiàn)的各種球體效果【附在線演示】
10個demo示例學(xué)會CSS3 radial-gradient徑向漸變