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盒模型：IE6混杂模式下的盒模型