css背景色漸變之線性漸變和徑向漸變的具體用法

漸變？：背景色在多個顏色之間平穩過渡

線性漸變:從一個方向到另一個方向到另一個方向的顏色的變化

線性漸變如圖所示：

標准模式的語法（不添加瀏覽器前綴）：

background:linear-gradient(direction,color-stop1,color-stop2)

說明：direction默認值是to bottom，即從上往下

stop:顏色的分布位置，默認均勻分布（平均分布）

兼容模式的語法（添加瀏覽器前綴）：

background:-webkit-linear-gradient(direction,color-stop1,color-stop2)

說明：direction值不能加to，該值表示顏色從該方向開始漸變，與上面相反

stop:顏色的分布位置，默認均勻分布（平均分布）

漸變方向：前面實現了上下或左右漸變，接下來介紹對角線型漸變

1、to left \ to right \ to top（上下或左右漸變）

2、to left top \ to right bottom(對角線漸變)

3、漸變線角度的變化

例如：標准模式 ： 40deg 40度

兼容模式 ： 90 - 40deg

線性漸變：顏色的分布(顏色區域大小)：

linear-gradient(方向, 顏色1 20%，顏色2 30%，顏色3 )

到20%這個位置仍然是顏色1 出了20% 開始向顏色2漸變

代碼如下所示：　　

　　div{

            width:500px;

            height:300px;

            margin:100px auto;

            background-image: -webkit-linear-gradient(left, red, yellow);

        }

 

徑向漸變：從一個點到四周的顏色的過渡變化。

徑向漸變如圖所示：

語法：（必須加瀏覽器前綴）

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：漸變起點的位置，可以為百分比，默認是圖形的正中心。

shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。

size:關於徑向漸變的大小：

closest-side 最近邊

farthest-side 最遠邊

closest-corner 最近角

farthest-corner 最遠角

 實現代碼如下：

　　div{

            width:500px;

            height:300px;

            margin:40px auto;

            background:-webkit-radial-gradient(center,closest-corner,red,yellow,green);

        }

 

  如果感覺對自己有幫助，麻煩點一下關注，會一直盒大家分享知識的，謝謝！！！