深入理解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 right：設定漸變從左到右。相當於: 90deg
to top：設定漸層從下往上。相當於: 0deg
to bottom：設定漸層從上到下。相當於: 180deg。這是預設值，等同於留空不寫。

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

#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中線性漸變linear-gradient屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！