linear-gradient()的用法實(shí)例

這篇文章給大家分享的是有關(guān)linear-gradient()的用法實(shí)例的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

linear-gradient() 的語(yǔ)法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

linear-gradient() 的取值：

下述值用來(lái)表示漸變的方向，可以使用角度或者關(guān)鍵字來(lái)設(shè)置：
<angle>：用角度值指定漸變的方向（或角度）。
to left：設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于: 270deg
to right：設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫(xiě)。

<color-stop>：用于指定漸變的起止顏色：
<color>：指定顏色。
<length>：用長(zhǎng)度值指定起止色位置。不允許負(fù)值
<percentage>：用百分比指定起止色位置。

注意：為了創(chuàng)建一個(gè)線性漸變，你需要設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（指定為一個(gè)角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過(guò)渡，并且你必須指定至少兩種，當(dāng)然也會(huì)可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。

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

linear-gradient()的用法實(shí)例

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); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后） */
   }

效果圖：

如圖所示，實(shí)例是從紅色到黃色，從左至右的線性漸變，寫(xiě)的時(shí)候要注意瀏覽器的兼容性問(wèn)題和語(yǔ)法規(guī)則。本文主要介紹了CSS中的線性漸變，漸變分為線性漸變和徑向漸變，下一篇文章會(huì)

感謝各位的閱讀！關(guān)于“l(fā)inear-gradient()的用法實(shí)例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！