CSS中的linear-gradient參數(shù)學(xué)習(xí)與使用示例教程

定義與方法
inear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線(xiàn)性漸變的圖片。創(chuàng)建一個(gè)線(xiàn)性漸變,需要指定兩種顏色,還可以實(shí)現(xiàn)不同方向(指定為一個(gè)角度)的漸變效果,如果不指定方向,默認(rèn)從上到下漸變。
參數(shù)
方法:linear-gradient(direction, color-stop1, color-stop2, ...)
direction:第一個(gè)參數(shù)表示漸變的方向。其可以是一個(gè)具體的角度值如45deg,或者是具體的方向值如to top,表示自下而上漸變;to bottom表示自上而下漸變【默認(rèn)為to bottom】,還有 to right、to left等。
color-stop:漸變色的起止位置,通常是顏色加起始位置百分比。如 red 10%等。
角度參考值:【角度值僅代表寬高相等的正方形所對(duì)應(yīng)的角度值】
direction【方向值】 | angle【角度值】 |
---|---|
to right | 90deg |
to bottom right | 135deg |
to top right | 45deg |
to left | -90deg|270deg |
to top left | -45deg|315deg |
to bottom left | -135deg|225deg |
to top | 0 |
to bottom | 180deg |
線(xiàn)性漸變的組成
線(xiàn)性漸變由一個(gè)軸、漸變線(xiàn)和兩個(gè)或多個(gè)色停點(diǎn)定義。軸上的每個(gè)點(diǎn)都是不同的顏色,為了創(chuàng)建平滑的漸變,linear-gradient()函數(shù)繪制了一系列垂直于漸變線(xiàn)的彩色線(xiàn),每一條線(xiàn)的顏色都和它與漸變線(xiàn)相交的點(diǎn)的顏色相匹配。
漸變線(xiàn)由包含漸變圖像的方框的中心和一個(gè)角度定義。漸變的顏色由兩個(gè)或多個(gè)點(diǎn)決定:起點(diǎn)、終點(diǎn)和中間的可選色停點(diǎn)。
角度值
角度值:穿過(guò)中心點(diǎn)的垂直線(xiàn)與漸變線(xiàn)之間的夾角,如圖中所示的E為30度角。根據(jù)角度可以確定漸變線(xiàn)的位置,如圖中F’所在的直線(xiàn)為漸變線(xiàn)。
起止點(diǎn):起點(diǎn)是漸變線(xiàn)上第一個(gè)顏色開(kāi)始的位置。終點(diǎn)是最后一種顏色的終點(diǎn)。這兩個(gè)點(diǎn)的每一個(gè)點(diǎn)都是由梯度線(xiàn)與在同一象限內(nèi)從方框角出發(fā)的垂線(xiàn)的交點(diǎn)定義的。終點(diǎn)可以理解為起點(diǎn)的對(duì)稱(chēng)點(diǎn)。
如上圖中從C點(diǎn)和A點(diǎn)向漸變線(xiàn)畫(huà)出垂線(xiàn),交點(diǎn)即為起止點(diǎn)。
上圖中G為起點(diǎn),H為終點(diǎn)。color stop為介于起點(diǎn)和終點(diǎn)之間,漸變線(xiàn)上的某些點(diǎn)。以linear-gradient(30deg, red 10% , yellow 30%, blue 70%)
為例,在漸變線(xiàn)上就有3個(gè)點(diǎn),從起點(diǎn)開(kāi)始10%,30%,70%的位置。
漸變中心點(diǎn):默認(rèn)漸變中心點(diǎn)為兩個(gè)色值點(diǎn)的中間值,可通過(guò)參數(shù)移動(dòng)中間點(diǎn)。以上面linear-gradient(30deg, red 10% , yellow 30%, blue 70%)
為例,在紅色向黃色漸變時(shí),默認(rèn)的漸變中心點(diǎn)在兩者正中的位置,也就是20%的位置。linear-gradient(30deg, red 10% , 15%, yellow 30%, blue 70%)
,通過(guò)在兩者之間設(shè)定值,可以將中心點(diǎn)移動(dòng)到15%的位置。
用法示例
通過(guò)在漸變線(xiàn)上添加更多的顏色停止點(diǎn),您可以在多個(gè)顏色之間創(chuàng)建高度自定義的過(guò)渡??梢允褂没蝻@式地定義顏色停止的位置。如果您沒(méi)有指定顏色的位置,它將被放置在它前面和后面顏色的中間。下面兩個(gè)梯度是相等的
linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
默認(rèn)情況下,如果沒(méi)有帶有0%停止的顏色,則聲明的第一個(gè)顏色將在該點(diǎn)。同樣,最后一種顏色將繼續(xù)到100%標(biāo)記,或者如果在最后一站沒(méi)有聲明長(zhǎng)度,則在100%標(biāo)記處。
允許多位置彩色停機(jī),通過(guò)在CSS聲明中包含兩個(gè)位置,可以將一個(gè)顏色聲明為兩個(gè)相鄰的顏色停止點(diǎn)。下面三個(gè)梯度是相等的
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
創(chuàng)建不帶漸變的純色帶
background: linear-gradient(red 0% 30%, yellow 30% 60%, blue 30% 100%);
繪制三角圖形
在該例子中,通過(guò)將其中一種色彩設(shè)置為透明色transparent,可獲得上三角或者下三角
.box { width: 100px; height: 100px; background-image: linear-gradient(45deg, yellow 50%, red 50%); /* 等價(jià)于background-image: linear-gradient(45deg, yellow 0 50%, red 50% 100%); */ background-size: 100% 100%; }
創(chuàng)建方塊背景圖
由四個(gè)三角形組成兩個(gè)小方塊。
.box { height: 90px; background-image: linear-gradient(45deg, red 25%,transparent 0), linear-gradient(45deg, transparent 75%, red 0), linear-gradient(45deg, red 25%, transparent 0), linear-gradient(45deg, transparent 75%, red 0); background-size: 30px 30px; border: 1px solid pink; background-position: 0 0,-15px 15px,15px -15px,0 0; }
網(wǎng)格線(xiàn)
height: 300px; background-image: linear-gradient(to right,pink 1px, transparent 1px), linear-gradient(pink 1px, transparent 1px); background-size: 30px 30px;
注意事項(xiàng)
帶前綴的漸變?cè)O(shè)置角度的差異性
linear-gradient(0deg, red ,blue)
不太前綴的漸變默認(rèn)是從上往下漸變。加上前綴以后,是從做左往右。
background-image:-webkit-linear-gradient(0deg,skyblue,orange); background-image:-moz-linear-gradient(0deg,skyblue,orange); background-image:-o-linear-gradient(0deg,skyblue,orange); background-image:-ms-linear-gradient(0deg,skyblue,orange);
為了保持兩者一致,可采用互補(bǔ)的寫(xiě)法,帶前綴的和不帶前綴的角度值相加為90deg。
background-image:-webkit-linear-gradient(90deg,skyblue,orange); //等價(jià) linear-gradient(0deg, red ,blue)
漸變方向關(guān)鍵詞
-webkit-linear-gradient(right,skyblue,orange)
等價(jià)于 gradient(to left,skyblue,orange)
,是一個(gè)從右往左的漸變。
到此這篇關(guān)于CSS中的linear-gradient參數(shù)學(xué)習(xí)與使用的文章就介紹到這了,更多相關(guān)css linear-gradient參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時(shí)控制行和列,相比 Flex(一維布局),更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性,它們用于控制元素周?chē)目瞻讌^(qū)域,本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性,用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標(biāo)簽(超鏈接)的下劃線(xiàn)的幾種方法,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-04-07
- 在前端開(kāi)發(fā)中,CSS(層疊樣式表)不僅是用來(lái)控制網(wǎng)頁(yè)的外觀(guān)和布局,更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級(jí),本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見(jiàn)使用場(chǎng)景、常見(jiàn)問(wèn)題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢(xún)@mediaprint包括基本語(yǔ)法、常見(jiàn)使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動(dòng)態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類(lèi)名和內(nèi)聯(lián)樣式的兩種方法:對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類(lèi)名或樣式;通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類(lèi)名或樣式,此外2025-02-26