當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

linear-gradient radical-gradient详解

發布時間：2024/2/28 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 linear-gradient radical-gradient详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

線性漸變與徑向漸變，挺好玩的兩個屬性值，不過挺復雜的，希望能捋清楚吧

1.linear-gradient

（1）基礎用法

傳兩部分參數方向 + 顏色（顏色可填兩個以上的值），方向可為to right / top / left / bottom（默認方向）/ top right / top left / bottom right / bottom left 以及角度等

【例1】默認值為botto

<!DOCTYPE html> <html lang="en"> <head><style>div {width: 200px;height: 200px;background-image: linear-gradient(#ff7, #7f7, #77f );}</style> </head> <body><div></div> </body> </html>

【結果】

?【例2】方向top right

div {width: 200px;height: 200px;background-image: linear-gradient(to top right, #ff7, #7f7, #77f ); }

【例3】方向值為角度

div {width: 200px;height: 200px;background-image: linear-gradient(90deg, #ff7, #7f7, #77f ); }

【結果】

（2）進階用法

確定顏色的起止位置，在每個顏色后面添加像素參數

【例】

div {width: 300px;height: 100px;background-image: linear-gradient(90deg, #ff7 50px, #7f7 150px, #77f 200px); }

【結果】在0-50px之間顏色值為 #ff7 ，50px開始過渡直至150px為 #7f7，150px過渡至200px，200px-300px顏色值為 #77f

2.radical-gradient

徑向漸變

語法規則：radial-gradient(形狀放射半徑 at 圓心位置 ,?顏色)

形狀：circle / ellipse

放射半徑：closest-corner / closest-side / farthest-corner / farthest-side

位置：（一個參數/兩個參數）像素值 / 百分比 / left,right,top,bottom,center

顏色：顏色后也可添加起止位置，長度是相對于圓心計算，即放射點

【注】可以不填，但是屬性值位置一定不能亂！！！

【例1】只填顏色

div {width: 200px;height: 200px;background-image: radial-gradient(#fff 0px, #ff7 30px, #000 90px); }

【結果】

【例2】添加位置

div {width: 200px;height: 200px;background-image: radial-gradient(at 0px 0px, #fff, #ff7, #000); }

?【結果】

【例3】添加形狀

ellipse

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse at 100px 50px, #fff, #ff7, #000); }

【結果】

?circle

div {width: 200px;height: 200px;background-image: radial-gradient(circle at 100px 50px, #fff, #ff7, #000); }

【結果】

【例4】添加放射半徑

closest-corner

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse closest-corner at 80px 50px, #fff, #ff7, #000); }

【結果】

?closest-side

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse closest-side at 80px 50px, #fff, #ff7, #000); }

【結果】

?farthest-corner

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse farthest-corner at 80px 50px, #fff, #ff7, #000); }

【結果】

?farthest-side

div {width: 200px;height: 200px;background-image: radial-gradient(ellipse farthest-side at 80px 50px, #fff, #ff7, #000); }

【結果】

總結

以上是生活随笔為你收集整理的linear-gradient radical-gradient详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS3属性之background
下一篇： CSS3属性——text