成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

入坑線性漸變linear-gradient

Corwien / 1553人閱讀

摘要：線性漸變的表達式看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。結(jié)果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉(zhuǎn)的。

線性漸變linear-gradient的表達式：
linear-gradient( [ | ,]? [, ]+);

看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。
先從幾個實際的表達式講起：

background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);    
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);

按上面來理解——
background-image:linear-gradient([角度或邊角,]x(0or1)+(顏色+空格+長度或百分比)+[(,顏色+空格+長度或百分比)xn(n>=1)]);

[角度或邊角,]*(0or1)
指

[|,]?

(顏色+空格+長度或百分比)
指

[(,顏色+空格+長度或百分比)*n(n>=1)]
指

[, ]+

我給出的表達式里頭的“+”理解成字符串之間的合并就可以了

不知道有沒有將大家繞暈，從一開始我就是這樣理解的。換一種簡單暴力點的——

“|”指“或（即or）”

“?”指“0或1”

“+”指“1個以上”

還是從實際案例中來深入理解，下面的測試結(jié)果都是基于firefox38.0

一、認識線性漸變的角度

HTML中的body部分——


  
0deg

依次將里頭的“0deg”替換成“45deg”、“90deg”、“135deg”、“180deg”。
結(jié)果為——

線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉(zhuǎn)的。

二、兩個以上的漸變顏色和擾人的

先看一個多個漸變顏色的實例。

上圖是從左到右的水平漸變方向，知道了漸變的總長度和起始點，就能一一確定的位置（由長度或百分比來決定），結(jié)合對應(yīng)位置上的顏色就可以知道上一個和下一個是如何發(fā)生顏色漸變的了。

水平和垂直方向的總長度直觀上很好理解，無疑是區(qū)塊背景的寬度或者是高度。如果是非水平和垂直的漸變角度，該如何確定漸變的總長度呢？通過下圖來理解。

如圖所示，漸變的起點和終點在過中心的漸變線的垂直線上，給出一個區(qū)塊和漸變方向，就能夠確定漸變的起始點和總長度了，這樣有n個，就可以劃分n-1個漸變區(qū)域了。
實例：
HTML中的body部分——

三、總結(jié)

其實linear-gradient并不坑，理解了原理分分鐘玩轉(zhuǎn)漸變。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50132.html

相關(guān)文章

  • 入坑線性漸變linear-gradient

    摘要：線性漸變的表達式看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。結(jié)果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉(zhuǎn)的。 線性漸變linear-gradient的表達式：linear-gradient( [ | ,]? [, ]+); 看到線性漸變的表達式，又要開始用腦了，分拆開來其實很好理解。先從幾個實際的表達式講起： background-image:li...

    gekylin 評論0 收藏0

  • CSS3-線性漸變

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

    piglei 評論0 收藏0

  • 淺探css3漸變

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

    lieeps 評論0 收藏0

  • CSS3 線性漸變應(yīng)用

    摘要：分為線性漸變和徑向漸變。而我們今天主要是通過一個小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個大致的針孔注射器。第一個參數(shù)表示線性漸變的方向，是從上到下是從左到右，如果定義成，那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient（線性漸變）和 radial-gradient（徑向漸變）。而我們今天主要是通過一個小例子來針...

    Snailclimb 評論0 收藏0

  • css3 漸變

    摘要：漸變漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變線性漸變線性漸變?yōu)橄蛏?，向下，向左，向右兩種漸變方式。線性漸變由一個軸即梯度線構(gòu)成。 css3ps: css越來越真正的像一門語言了，css已經(jīng)有變量了，剛剛看到文檔中。一個實驗性質(zhì)的功能。 漸變 漸變分為兩種漸變，一種是線性漸變，一種是徑向漸變 線性漸變 線性漸變?yōu)橄蛏希蛳?，向左，向右兩種漸變方式。 linear-gradient...

    FrozenMap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<