CSS3實(shí)現(xiàn)背景顏色漸變

2022-06-29    分類： 網(wǎng)站建設(shè)

一. Webkit瀏覽器

(1) 第一種寫法：
background:-webkit-gradient(linear ,10% 10%，100% 100%，
color-stop(0.14,rgb(255,0,0)),
color-stop(0.5,rgb(255,255,0)),
color-stop(1,rgb(0,0,255)) );

 第一個參數(shù)：表示的是漸變的類型

linear線性漸變

           第二個參數(shù)：分別對應(yīng)x，y方向漸變的起始位置

             第三個參數(shù)：分別對應(yīng)x，y方向漸變的終止位置

           第四/五/N個參數(shù)：設(shè)置漸變的位置及顏色


(2)第二種寫法：這種寫法比較簡單，而且效果比較自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));
 第一個參數(shù)：表示的是漸變的類型
 linear線性漸變
 第二個參數(shù)：分別對應(yīng)x，y方向漸變的起始位置
 第三個參數(shù)：分別對應(yīng)x，y方向漸變的終止位置
 第四個參數(shù)：設(shè)置了起始位置的顏色
 第五個參數(shù)：設(shè)置了終止位置的顏色

二.Mozilla瀏覽器

(1)第一種寫法：
 background:-moz-linear-gradient(10 10 90deg,
 rgb(25,0,0) 14%,
 rgb(255,255,0) 50%,
                                                                 rgb(0,0,255) 100%);

 第一個參數(shù)：設(shè)置漸變起始位置及角度
 第二/三/四/N個參數(shù)：設(shè)置漸變的顏色和位置

(2)第二種寫法：這種寫法比較簡單，而且效果比較自然
 background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);
 第一個參數(shù)：設(shè)置漸變的起始位置
 第二個參數(shù)：設(shè)置起始位置的顏色
 第三個參數(shù)：設(shè)置終止位置的顏色

三.IE 瀏覽器

 IE瀏覽器實(shí)現(xiàn)漸變只能使用IE自己的濾鏡去實(shí)現(xiàn)

        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

          第一個參數(shù)：漸變起始位置的顏色
第二個參數(shù)：漸變終止位置的顏色
第三個參數(shù)：漸變的類型

        

       0 代表豎向漸變        1  代表橫向漸變  

     P.S.這里設(shè)置背景的時候不需要給background設(shè)置，直接用filter即可，不要和其他的瀏覽器混淆

網(wǎng)站題目：CSS3實(shí)現(xiàn)背景顏色漸變
文章路徑：http://muchs.cn/news14/172964.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、微信公眾號、域名注冊、標(biāo)簽優(yōu)化、定制開發(fā)

廣告

聲明：本網(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)

h5響應(yīng)式網(wǎng)站建設(shè)