CSS3顏色漸變是怎么實現的

這篇文章主要介紹“CSS3顏色漸變是怎么實現的”，在日常操作中，相信很多人在CSS3顏色漸變是怎么實現的問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3顏色漸變是怎么實現的”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

CSS3 漸變，漸變是兩種或多種顏色之間的平滑過渡。

1. CSS3線性漸變在線性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或沿任意軸。如果使用過制作 Photoshop等軟件，對線性漸變并不會陌生。CSS3制作漸變效果，其實和使用制作軟件中的漸變工具沒有什么差別。首先指定一個漸變的方向、起始顏色、 結束顏色。具有這三個數就可以制作 一個最簡單、最普通的漸變效果。如果制作一個復雜的多色漸變效果，就需要在同一個漸變方向增添多個色 標。 具備這些漸變參數（ 至少三個），各瀏覽器就會繪制與漸變線垂直的顏色結來填充整個容器。瀏覽器渲染出來的效果就 類似于制作軟件設計出來的漸變圖像。

：CSS3線性漸變，(linear-gradient)

1，顏色從頂部向底部漸變 簡單的方法直接使用“ to top”關鍵詞， 表示第一顏色向第二顏色漸變。 實現類似于“ to top”效果還可以使用角度值“ 0deg”、“ 360deg” 和“- 360deg”。

2，顏色從底部向頂部漸變 關鍵詞“ to bottom” 剛好 與“ to top” 相反， 從底部向頂部實現漸變效果。 也可以使用角度值“ 180deg” 和“- 180deg” 實現同等效果。

3，顏色從左向右漸變“to left”關鍵詞實現了從左向右顏色漸變， 也可以通過角度值“ 90deg” 和“ 270deg”實現。

4，顏色從右向左漸變 “to right” 正好與“ to left” 效果相反。 實現了顏色從右向左直線漸變， 也可以使用角度值“ 90deg” 和“- 270deg”。

5，從右下角向左上角線性漸變 “to top left” 實現從右下角向左角線性漸變。

6，從左下角到右上角線性漸變 “to top right” 關鍵詞實現左下角到右上角的線性漸變。

7，從右上角到左下角線性漸變 “to bottom left” 關鍵詞實現了右上角向左下角直線漸變。

8，從左上角向右下角線性漸變 “to bottom right” 關鍵詞實現了左上角向右下角直線漸變。

CSS3制作漸變按鈕

Web頁面或者說Web程序應用中， 按鈕是設計中的一個重要元素， 也是設計師非常重視的一個設計元素。 設計師借助Photoshop等軟件實現按鈕效果， 然后通過圖片的方式轉用到Web頁面中或者 Web應用程序中。 這種方法安全、兼容性較強，實現方法也簡單，但適應能力比較弱、重用性、可擴展性、 維護性差。例如，修改一個按鈕的顏色，必須先從制作軟件中修改好，再次切圖，最后替換 Web頁面中的圖片。CSS3 的漸變出現后， Web設計師可以擺脫Photoshop的束縛，特別是在配合CSS3的陰影、圓角和@font- face等屬性，可以直接脫離制圖軟件，直接使用CSS快速 設計各種精巧、靚麗、 細膩的按鈕（ 幾乎可以和設計軟件制作出來的效果一模一樣）。 通過CSS3屬性制作的按鈕與設計軟件制作的按鈕相比， 有以下幾大優勢： 

-靈活性、 可擴展性強： 可以通過CSS3的屬性可以直接修改按鈕的大小、 背景等效 果。 

-可以減少http請求， 提高頁面的加載性能。 

-可以應用到任何的HTML標簽元素， 如 a、 input、 button、 span 和 div 等。 ·可以支持按鈕多種狀態效果， 比如當前狀態、 懸停狀態和點擊狀態。 

-完全兼容不支持 CSS3 的瀏覽器， 如果不兼容CSS3， 則顯示沒有漸變和陰影的普通效果。

：CSS3徑向漸變，(radial-gradient)

CSS3徑向漸變是圓形或橢圓形漸變。 顏色不再沿著一條直線軸變化， 而是從一個起點朝所有方向混合。 但相對線 漸變要比徑向漸變復雜得多。

CSS3 徑向漸變的屬性參數 

CSS3的徑向漸變相對于線性漸變要復雜得多， 屬性參數也繁多復雜。 CSS3徑向變中新舊語法中的屬性參數定義如下: 

1.< position>主要用來定義徑向漸變的圓心位置。 此值類似于CSS中background- position屬性， 用于確定元素漸變的中心位置。 如果這個參數省略了， 其默認值為 center。 其值主要有以下幾種： ·<length>： 用長度值指定徑向漸變圓心的橫坐標或縱坐標， 可以為負值。 

-percentage>： 用百分比指定徑向漸變圓心的橫坐標或縱坐標， 可以為負值。 

-center： 設置中間為徑向漸變圓心的橫坐標值或縱坐標。 

-top： 設置頂部為徑向漸變圓心的縱標值。 http:/ /www.iis7.com/b/wzjk/

-right： 設置右邊為徑向漸變圓心的橫坐標值。 

-bottom： 設置底部為徑向漸變圓心的縱標值。

-left： 設置左邊為徑向漸圓心的橫坐標值。

2.< shape> 主要用來定義徑向漸變的形狀。 其主要包括兩個值circle 和ellipse： 

-circle： 如果< size> 和< length> 大小相等， 徑向漸變是一 個圓形， 也就是用來指定圓形的徑向漸變。 

-ellipse： 如果< size> 和< length> 大小不相等， 徑向漸變是一個橢圓形， 也就是用來指定橢圓形的徑向漸變。

3.< size>用來確定徑向漸變的結束形狀大小。 如果省略， 其默認值為 farthest- corner。 可以給其顯式地設置一些關鍵詞。 

-closest- side： 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。 

-closest- corner： 指定徑向漸變的半徑長度為從圓心到圓心 最近的角。

-farthest- side： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。 

-farthest- corner： 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。 如果< shape>設置 為circle或者省略，< size> 可能顯式設置為< length>。 表示用長度值指定徑向漸變的橫向或縱向直徑 長度， 并根據橫向和縱向的直徑來確定徑向漸變的形狀是圓或者是橢圓， 不能為負值。

4.< color- stop> 徑向漸變線上的停止顏色， 類似于線性漸變的< color- stop>， 漸變線從中心點向右擴散。 其中0%表示漸變線的起始點， 100%表示漸變線的與漸變容器相交結束的位置， 而且其 顏色停止可以定義一個負值。

：CSS3重復線性漸變

可以使用重復線性漸變repeating-linear-gradient 屬性代替線性漸變linear-gradient。 它們采取相同的值， 但色標在兩個方向上都無限重復。 不過使用百分比設置色標的位置沒有多大的意義， 但 使用像素和其他的單位重復線性漸變可以創建一些很酷的效果，

：CSS3重復徑向漸變

以同樣的方式， 使用相關的屬性創建重復的徑向漸變， 其語法和radial- gradient 類似， 只是以一個徑向漸變為基礎進行重復漸變，

在CSS3中漸變特性主要包括以下四種： 

線性漸變（ linear- gradient）、

徑向漸變（ radial- gradient）、 

重復線性漸變（ repeating- linear- gradient） 

重復徑向漸變（ repeating- radial- gradient） 其中線性漸變和重復線性漸變語法相同， 而徑向漸變和重復徑向漸變的語法相同。 

從本質上說， 漸變就是背景屬性中的background-image， 瀏覽器直接將漸變生成圖片， 可以直接使用 CSS 背景屬性來控制它們。

到此，關于“CSS3顏色漸變是怎么實現的”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！