CSS3中使用gradient實(shí)現(xiàn)漸變效果的方法

本篇內(nèi)容主要講解“CSS3中使用gradient實(shí)現(xiàn)漸變效果的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS3中使用gradient實(shí)現(xiàn)漸變效果的方法”吧!

成都創(chuàng)新互聯(lián)公司專注于惠東企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),購(gòu)物商城網(wǎng)站建設(shè)?；輺|網(wǎng)站建設(shè)公司,為惠東等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。
線性漸變?cè)赪ebkit下的應(yīng)用

CSS Code復(fù)制內(nèi)容到剪貼板

1. -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發(fā)布書(shū)寫(xiě)語(yǔ)法  

    第一個(gè)參數(shù)表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。
    第二個(gè)參數(shù)和第三個(gè)參數(shù)，都是一對(duì)值，分別表示漸變起點(diǎn)和終點(diǎn)。這對(duì)值可以用坐標(biāo)形式表示，也可以用關(guān)鍵值表示，比如 left
    top（左上角）和left bottom（左下角）。
    第四個(gè)和第五個(gè)參數(shù)，分別是兩個(gè)color-stop函數(shù)。color-stop函數(shù)接受兩個(gè)參數(shù)，第一個(gè)表示漸變的位置，0為起點(diǎn)，0.5為中點(diǎn)，1為結(jié)束點(diǎn)；第二個(gè)表示該點(diǎn)的顏色。

線性漸變?cè)贛ozilla下的應(yīng)用

語(yǔ)法：

CSS Code復(fù)制內(nèi)容到剪貼板

1. -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  

參數(shù)：

    其共有三個(gè)參數(shù)，第一個(gè)參數(shù)表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left
    top，那就是從左上角到右下角。第二個(gè)和第三個(gè)參數(shù)分別是起點(diǎn)顏色和終點(diǎn)顏色。你還可以在它們之間插入更多的參數(shù)，表示多種顏色的漸變。

css3中實(shí)現(xiàn)了背景漸變

CSS Code復(fù)制內(nèi)容到剪貼板

1. <gradient> = [   

2.     <linear-gradient> | <radial-gradient> |   

3.     <repeating-linear-gradient> | <repeating-radial-gradient> ]  

一：線性漸變  

 在CSS3中，可以使用 linear-gradient實(shí)現(xiàn)背景線性漸變。

CSS Code復(fù)制內(nèi)容到剪貼板

1. <linear-gradient> = linear-gradient(  [ [ <angle> | to <side-or-corner> ] ,]?   <color-stop>[, <color-stop>]+ )  <side-or-corner> = [left | rightright] || [top | bottombottom]  

在ff瀏覽器時(shí)需要將樣式代碼書(shū)寫(xiě)成"-moz-linear-gradient",chrome瀏覽器時(shí)需要寫(xiě)成"-webkit-linear-gradient"的形式。

 這里顏色值也可以分好多段，如

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(top, #eff6fb, #d3e4f3 68%);  

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient( left, #FF0000, #FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)  

顯示效果：

漸變方向也指定關(guān)鍵字。

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(top left, #eff6fb 10%, #d3e4f3 68%);  

效果：

漸變方向也可以指定角度。

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);  

0deg漸變開(kāi)始在左側(cè)，90deg的底部，180deg在右側(cè)，270deg在頂部。因此，我們可以認(rèn)為角度作為反??時(shí)針順序。
如:

透明度(Transparency)：還支持透明漸變。這是相當(dāng)有用的，例如，當(dāng)堆疊多個(gè)背景時(shí)。這里是兩個(gè)背景的結(jié)合：一張圖片，一個(gè)白色到透明的線性漸變。

二：徑向漸變

徑向漸變類似于線性漸變

CSS Code復(fù)制內(nèi)容到剪貼板

1. <radial-gradient> = radial-gradient(   [ [ <shape> || <size> ] [ at <position> ]? , |     at <position>,    ]?   <color-stop> [ , <color-stop> ]+ )  

1.顏色
直接定義顏色漸變。background: -moz-radial-gradient(red, yellow, #1E90FF);

效果如圖：

指定位置顏色的漸變：background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
效果如果：

2.形狀
起始位置一樣，形狀不一樣。

CSS Code復(fù)制內(nèi)容到剪貼板

1. background-image: -moz-radial-gradient(bottombottom left,circle,red, yellow, #1E90FF);   

2. background-image: -moz-radial-gradient(bottombottom left,ellipse,red, yellow, #1E90FF);  

效果如圖：

3.大小(Size)：size的不同選項(xiàng)(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用來(lái)定義圓或橢圓大小的點(diǎn)。

三：重復(fù)漸變(Repeating Gradients)
重復(fù)一個(gè)漸變，可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

CSS Code復(fù)制內(nèi)容到剪貼板

1. .repeating_radial_gradient_example {       

2. background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); }    

3. .repeating_linear_gradient_example {      

4.   background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); }  

到此，相信大家對(duì)“CSS3中使用gradient實(shí)現(xiàn)漸變效果的方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞名稱：CSS3中使用gradient實(shí)現(xiàn)漸變效果的方法
本文鏈接：http://muchs.cn/article34/jpejpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、企業(yè)網(wǎng)站制作、ChatGPT、動(dòng)態(tài)網(wǎng)站、微信小程序、網(wǎng)站改版

廣告

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