卡卡網(wǎng)

在上一篇文章里，我們了解了CSS背景顏色漸變的一些知識，參考文章指南：

• 簡單實例解釋：background:-webkit-gradient() color-stop()

在本文，將用10個簡單示例，介紹CSS linear-gradient()背景顏色漸變的使用方法。

css語法

background: linear-gradient(direction,color-stop1,color-stop2,...);

• direction：指定漸變的方向（或角度）；
• color-stop1,color-stop2,...：用于指定漸變的起止顏色（至少需要兩種顏色）

關于color-stop()的使用，可以參考簡單實例解釋：background:-webkit-gradient() color-stop() 。

linear-gradient()在各瀏覽器的寫法有一點不同：

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ 
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* 標準語法 */

示例介紹

下面用10個示例，簡單介紹這個屬性的用法。

1、background: linear-gradient(to left,#d3959b,#bfe6ba);

to left 設置漸變從右到左，相當于270deg。

2、background: linear-gradient(to right,#d3959b,#bfe6ba);

to right設置漸變從左到右，相當于90deg。

3、background: linear-gradient(to top,#d3959b,#bfe6ba);

to top 設置漸變從下到上，相當于0deg。

4、background: linear-gradient(to bottom,#d3959b,#bfe6ba);

to bottom 設置漸變從上到下，相當于180deg。

5、background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top = to top right ：從左下角到右上角，對角線角度。

6、background: linear-gradient(45deg,#d3959b,#bfe6ba);

和 to top right 有細微差別（背景為正方形的時候無差別）  。

7、background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

用百分比指定起始顏色的位置，默認值為0%。

8、background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

從左到右漸變，相當于90deg。 

9、background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

相當于 to top right，從左下角到右上角對角線漸變。

10、background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

rgba使用了0.5的透明度。

總結

本文通過10個簡單示例，介紹了CSS linear-gradient()背景顏色漸變的相關知識，通過本文的介紹，目的是能讓大家了解linear-gradient()的基本用法。

相關文章推薦

• 簡單實例解釋：background:-webkit-gradient() color-stop()

標簽: linear-gradient  背景顏色漸變  color-stop