簡(jiǎn)解Css3 - linear-gradient

JerryZou 發(fā)布于2019-08-29 13:58 / 1449人閱讀

摘要：簡(jiǎn)解概念函數(shù)創(chuàng)建一個(gè)表示顏色線性漸變的。簡(jiǎn)單的說(shuō)，元素只要用了，它等同于一張圖片。使用方式簡(jiǎn)單起見(jiàn)，只講一種最通用的使用方式。時(shí)可以看作是上圖垂直指向頂部的黑色虛線。示例藍(lán)色起點(diǎn)紅色終點(diǎn)藍(lán)色起點(diǎn)紅色終點(diǎn)參考

簡(jiǎn)解Css3 - linear-gradient 概念

CSS linear-gradient() 函數(shù)創(chuàng)建一個(gè)表示顏色線性漸變的  。

簡(jiǎn)單的說(shuō)，元素只要用了linear-gradient，它等同于一張圖片。
即:
background：linear-gradient(...params) ~= background：url(...image)

所以它只能用在圖片可以用的地方。如：background、background-image。

不要把它當(dāng)作顏色用在color等樣式中。

使用方式

簡(jiǎn)單起見(jiàn)，只講一種最通用的使用方式。

background: linear-gradient(angle[角度], color-stop[起始顏色],color-stop[終點(diǎn)顏色]);

原理

angle描述漸變的方向，單位是deg，它的有效角度值是0-360deg。默認(rèn)180deg。
幾個(gè)常用漸變角度分別為:
從下到上:0deg
從上到下:180deg
從左到右:90deg
從右到左:270deg

如下圖所示:

angle的值其實(shí)就是以向頂部中央方向?yàn)槠瘘c(diǎn)順時(shí)針旋轉(zhuǎn)的角度。
0deg時(shí)可以看作是上圖垂直指向頂部的黑色虛線。

這里我們要理解下漸變線的概念:

漸變線由包含漸變圖形的容器的中心點(diǎn)和一個(gè)角度來(lái)定義的。漸變線上的顏色值是由不同的點(diǎn)來(lái)定義，包括起始點(diǎn)，終點(diǎn)，以及兩者之間的可選的中間點(diǎn)（中間點(diǎn)可以有多個(gè)）。

圖中示例了一個(gè)45deg經(jīng)過(guò)矩形中心的漸變線，它的起點(diǎn)就是垂直于漸變線的紅點(diǎn)，終點(diǎn)是起點(diǎn)對(duì)應(yīng)的反射點(diǎn)，也就是圖上的綠點(diǎn)。

不需多言，盡在圖中。

示例 1 0deg 藍(lán)色起點(diǎn) 紅色終點(diǎn)

background: linear-gradient(180deg, blue, red);

2 45deg 藍(lán)色起點(diǎn) 紅色終點(diǎn)

background: linear-gradient(45deg, blue, red);

參考

MDN-linear-gradient

云服務(wù)器 GPU云服務(wù)器 css3 css3氣泡 css3動(dòng)畫 JS+CSS3

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112832.html

相關(guān)文章

CSS3-線性漸變

摘要：兼容性見(jiàn)參考二線性漸變漸變線通過(guò)函數(shù)可以創(chuàng)建線性漸變圖片。線性漸變是通過(guò)一個(gè)軸定義的，這個(gè)軸稱為漸變線。等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)并且和直接距離為，不會(huì)漸變，如下圖參考線性漸變一、漸變（gradient） 1.1 關(guān)于漸變漸變表示從一種顏色平滑的過(guò)度到另一種顏色。它是圖片類型的一種，但是漸變類型圖片沒(méi)有尺寸，也沒(méi)有長(zhǎng)寬比。它的尺寸取決于被應(yīng)用的場(chǎng)景，比如作為元素的背景圖片時(shí)，...

piglei 2019-08-30 14:24 評(píng)論0 收藏0
關(guān)于css3中linear-gradient中的百分比

摘要：第一個(gè)顏色的實(shí)色占了總高度的，第二個(gè)顏色的實(shí)色也占了總高度的，而漸變的過(guò)度則占了總高度的。默認(rèn)的漸變方式為從上往下，所以當(dāng)某個(gè)顏色值設(shè)置了百分比后，便會(huì)從距離頂端相關(guān)的距離百分比計(jì)算開(kāi)始填充實(shí)色。而漸變色會(huì)在頂部與尾部的中間填充。相關(guān)閱讀點(diǎn) 《Css secret》第二章《背景與邊框》第五節(jié)《條紋背景》正文在第二章《背景與邊框》中第五節(jié)《條紋背景》中，談到了css3的新屬性值l...

darryrzhong 2019-08-30 15:53 評(píng)論0 收藏0
淺探css3漸變

摘要：基本用法想要知道線性漸變有什么用，當(dāng)然要先學(xué)習(xí)它的屬性和用法。下面我們先一起學(xué)習(xí)一下線性漸變的屬性。函數(shù)的第一個(gè)參數(shù)是角度或者方向，第二個(gè)參數(shù)是截止顏色的值，要想產(chǎn)生漸變的效果，當(dāng)然至少要兩個(gè)或者兩個(gè)以上的顏色值。 css3的漸變屬性已經(jīng)在各種網(wǎng)頁(yè)設(shè)計(jì)中被廣泛使用，在沒(méi)有css3的漸變屬性之前，要實(shí)現(xiàn)一些多種顏色切換的效果圖，你可能別無(wú)他法，只能用一個(gè)圖片來(lái)顯示，雖然你知道使用圖片需要...

lieeps 2019-08-29 17:17 評(píng)論0 收藏0
背景&邊框之魔法武器CSS3

摘要：簡(jiǎn)述在頁(yè)面的構(gòu)建過(guò)程中，離不開(kāi)背景邊框，背景和邊框就是最基本的設(shè)置了為了實(shí)現(xiàn)一些特定的視覺(jué)效果，單一的純色背景已經(jīng)不能滿足現(xiàn)有的效果了。在這里，我們使用純來(lái)實(shí)現(xiàn)一些相對(duì)復(fù)雜的背景和邊框效果，這些效果不能很好的實(shí)現(xiàn)向下兼容。簡(jiǎn)述在頁(yè)面的構(gòu)建過(guò)程中，離不開(kāi)背景、邊框，背景和邊框就是最基本的設(shè)置了UI為了實(shí)現(xiàn)一些特定的視覺(jué)效果，單一的純色背景已經(jīng)不能滿足現(xiàn)有的效果了。越來(lái)越多的圖片背景開(kāi)...

SwordFly 2019-08-29 15:34 評(píng)論0 收藏0
css3 實(shí)現(xiàn)一個(gè)k歌效果和一個(gè)進(jìn)度條的效果

摘要：歌效果比較簡(jiǎn)單，先分析歌效果吧。第二個(gè)進(jìn)度條效果其實(shí)就是一個(gè)小技巧而已，歌字體效果都出來(lái)了，地下在疊加一層背景色就了，這個(gè)背景色就是對(duì)應(yīng)的顏色值，這里就是修改一下顏色值，就是下面這段代碼了未完待續(xù)哦先看兩個(gè)效果：showImg(https://segmentfault.com/img/bVTkEB?w=263&h=91); showImg(https://segmentfault.c...

huangjinnan 2019-08-29 13:28 評(píng)論0 收藏0