深入理解CSS中線性漸變linear-gradient屬性

隨著網路的發展，人們不僅對網頁的功能要求高，而且對頁面的顏值要求也越來越高，例如頁面顏色不再使用單一的顏色，會使用多種顏色混合，讓頁面更加美觀，從而吸引更多的用戶。這篇文章就和大家分享CSS線性漸變 linear-gradient() 函數的使用方法，包括linear-gradient() 屬性，linear-gradient() 角度，linear-gradient() 方向等等。有需要的朋友可以參考一下，希望對你有用。

linear-gradient() 的語法：

= linear-gradient([ [ | to ] ,]? [, ] )
= [left | right] || [top | bottom]
= [ | ]?

linear-gradient() 的值：

#linear-gradient() 的值：


下述值用來表示漸變的方向，可以使用角度或關鍵字來設定：
：用角度值指定漸變的方向（或角度）。

to left：設定漸層為從右到左。相當於: 270deg

to right：設定漸變從左到右。相當於: 90deg
to top：設定漸層從下往上。相當於: 0deg
to bottom：設定漸層從上到下。相當於: 180deg。這是預設值，等同於留空不寫。

：用來指定漸層的起止顏色：

：指定顏色。 ：以長度值指定起止色位置。不允許負值：用百分比指定起止色位置。

注意：為了建立一個線性漸變，你需要設定一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，而且你必須指定至少兩種，當然也會可以指定更多的顏色去創造更複雜的漸層效果。

linear-gradient()的瀏覽器相容性

#linear-gradient()的用法實例

HTML部分：

<div id="box"></div>

CSS部分：

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

效果圖：

#########如圖所示，實例是從紅色到黃色，從左到右的線性漸變，寫的時候要注意瀏覽器的兼容性問題和語法規則。本文主要介紹了CSS中的線性漸變，漸變分為線性漸變和徑向漸變，下一篇文章會和大家分享徑向漸層。喜歡的朋友可以關注我！ ###

以上是深入理解CSS中線性漸變linear-gradient屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！