本篇內(nèi)容主要講解“CSS3中使用gradient實現(xiàn)漸變效果的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS3中使用gradient實現(xiàn)漸變效果的方法”吧!

成都創(chuàng)新互聯(lián)公司專注于惠東企業(yè)網(wǎng)站建設,響應式網(wǎng)站設計,購物商城網(wǎng)站建設。惠東網(wǎng)站建設公司,為惠東等地區(qū)提供建站服務。全流程按需網(wǎng)站設計，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。
線性漸變在Webkit下的應用

CSS Code復制內(nèi)容到剪貼板

1. -webkit-linear-gradient( [ || ,]? ,  [, ]* )//最新發(fā)布書寫語法  

    第一個參數(shù)表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。
    第二個參數(shù)和第三個參數(shù)，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left
    top（左上角）和left bottom（左下角）。
    第四個和第五個參數(shù)，分別是兩個color-stop函數(shù)。color-stop函數(shù)接受兩個參數(shù)，第一個表示漸變的位置，0為起點，0.5為中點，1為結(jié)束點；第二個表示該點的顏色。

線性漸變在Mozilla下的應用

語法：

CSS Code復制內(nèi)容到剪貼板

1. -moz-linear-gradient( [ || ,]? ,  [, ]* )  

參數(shù)：

    其共有三個參數(shù)，第一個參數(shù)表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left
    top，那就是從左上角到右下角。第二個和第三個參數(shù)分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變。

css3中實現(xiàn)了背景漸變

CSS Code復制內(nèi)容到剪貼板

1.  = [   

2.      |  |   

3.      |  ]  

一：線性漸變  

 在CSS3中，可以使用 linear-gradient實現(xiàn)背景線性漸變。

CSS Code復制內(nèi)容到剪貼板

1.  = linear-gradient(  [ [  | to  ] ,]?   [, ]+ )   = [left | rightright] || [top | bottombottom]  

在ff瀏覽器時需要將樣式代碼書寫成"-moz-linear-gradient",chrome瀏覽器時需要寫成"-webkit-linear-gradient"的形式。

 這里顏色值也可以分好多段，如

CSS Code復制內(nèi)容到剪貼板

1. background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);  

CSS Code復制內(nèi)容到剪貼板

1. background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)  

顯示效果：

漸變方向也指定關鍵字。

CSS Code復制內(nèi)容到剪貼板

1. background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);  

效果：

漸變方向也可以指定角度。

CSS Code復制內(nèi)容到剪貼板

1. background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);  

0deg漸變開始在左側(cè)，90deg的底部，180deg在右側(cè)，270deg在頂部。因此，我們可以認為角度作為反??時針順序。
如:

透明度(Transparency)：還支持透明漸變。這是相當有用的，例如，當堆疊多個背景時。這里是兩個背景的結(jié)合：一張圖片，一個白色到透明的線性漸變。

二：徑向漸變

徑向漸變類似于線性漸變

CSS Code復制內(nèi)容到剪貼板

1.  = radial-gradient(   [ [  ||  ] [ at  ]? , |     at ,    ]?    [ ,  ]+ )  

1.顏色
直接定義顏色漸變。background: -moz-radial-gradient(red, yellow, #1E90FF);

效果如圖：

指定位置顏色的漸變：background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
效果如果：

2.形狀
起始位置一樣，形狀不一樣。

CSS Code復制內(nèi)容到剪貼板

1. background-image: -moz-radial-gradient(bottombottom left,circle,red, yellow, #1E90FF);   

2. background-image: -moz-radial-gradient(bottombottom left,ellipse,red, yellow, #1E90FF);  

效果如圖：

3.大小(Size)：size的不同選項(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來定義圓或橢圓大小的點。

三：重復漸變(Repeating Gradients)
重復一個漸變，可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

CSS Code復制內(nèi)容到剪貼板

1. .repeating_radial_gradient_example {       

2. background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); }    

3. .repeating_linear_gradient_example {      

4.   background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); }  

到此，相信大家對“CSS3中使用gradient實現(xiàn)漸變效果的方法”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！