linear-gradient()的用法實例

這篇文章給大家分享的是有關(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框架,可快速的進(jìn)行和布克賽爾蒙古網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

linear-gradient() 的語法：

<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() 的取值：

下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設(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)值，等同于留空不寫。

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

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

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

效果圖：

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

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

網(wǎng)頁標(biāo)題：linear-gradient()的用法實例
網(wǎng)站路徑：http://muchs.cn/article22/ppjhcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站制作、域名注冊、虛擬主機(jī)、網(wǎng)站策劃、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)