IT兄弟連 HTML5教程 CSS3屬性特效 漸變1

• 2019 年 11 月 26 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/ITXDL123/article/details/103232168

漸變背景一直以來在Web頁面中都是一種常見的視覺元素。但一直以來，Web設計師都是通過圖形軟體設計這些漸變效果，然後以圖片形式或者背景圖片的形式運用到頁面中。Web頁面上實現的效果，僅從頁面的視覺效果上來看，與設計並無任何差異。事實上這種方法是比較麻煩的，因為首先需要設計師進行設計，然後進行切圖，在通過樣式應用到頁面中。另外，在實際應用中可擴展性差，還直接影響頁面性能。值得慶幸的是，W3C組織將漸變設計收入到CSS3標準中，讓廣大的前端設計師直接受益，可以直接通過CSS3的漸變屬性製作類似漸變圖片的效果。而且漸變屬性慢慢得到了眾多現代瀏覽器的兼容，甚至是煩人的IE，在IE10版本也支援了這個屬性。

CSS3 Gradient分為linear-gradient（線性漸變）和radial-gradient（徑向漸變）。

1 CSS3漸變介紹

欲要了解CSS3漸變，就先要知道CSS3漸變是什麼？從早前的設計中我們可以知道，漸變是兩種或多種顏色之間的平滑過渡。在創建漸變的過程中，可以指定多個中間顏色值，這個值稱為色標。每個色標包含一種顏色和一個位置，瀏覽器從每個色標的顏色淡出到下一個，以創建平滑的漸變。如下圖所示：

漸變可以應用於任何使用背景圖片的地方。這意味著在CSS樣式中，漸變相當於背景圖片，在理論上可在任何使用url() 值的地方採用，比如最常見的background-image、list-style-type以及前面介紹的CSS3的影像邊框屬性border-image。但直到目前為止，僅在背景圖片中得到最完美的支援。

2 線性漸變

在線性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或著沿任何任意軸。如果你曾使用過製作圖件，比如說Photoshop，那你對線性漸變並不會陌生。

CSS3製作漸變效果，其實和使用製作軟體中的漸變工具沒有什麼差別。首先需要指定一個漸變的方向、漸變的起始顏色、漸變的結束顏色。具有這三個參數就可以製作一個最簡單、最普通的漸變效果。如果你需要製作一個複雜的多色漸變效果，就需要在同一個漸變方向增添多個色標。具備這些漸變參數（至少三個），各瀏覽器就會繪製與漸變線垂直的顏色結來填充整個容器。瀏覽器渲染出來的效果就類似於製作軟體設計出來的漸變影像，從一種顏色到另一種顏色的平滑淡出，沿所指的線性漸變方向實現顏色漸變效果。

線性漸變的格式如下：

linear-gradient([<起點> || <角度>,]? <點>，<點>…)

線性漸變的參數描述如表1：

表1 CSS3線性漸變參數描述