這篇文章給大家分享的是有關(guān)linear-gradient()的用法實例的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站是專業(yè)的和布克賽爾蒙古網(wǎng)站建設(shè)公司，和布克賽爾蒙古接單;提供成都做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行和布克賽爾蒙古網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
linear-gradient() 的語法：
linear-gradient() 的取值：
下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設(shè)置：
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。這是默認值，等同于留空不寫。
注意：為了創(chuàng)建一個線性漸變，你需要設(shè)置一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，并且你必須指定至少兩種，當(dāng)然也會可以指定更多的顏色去創(chuàng)建更復(fù)雜的漸變效果。
linear-gradient()的瀏覽器兼容性
.jpg)
linear-gradient()的用法實例
HTML部分：
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)的語法（必須放在最后） */
}效果圖：
如圖所示，實例是從紅色到黃色，從左至右的線性漸變，寫的時候要注意瀏覽器的兼容性問題和語法規(guī)則。本文主要介紹了CSS中的線性漸變，漸變分為線性漸變和徑向漸變，下一篇文章會
感謝各位的閱讀！關(guān)于“l(fā)inear-gradient()的用法實例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
