簡解Css3 - linear-gradient

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

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

簡解Css3 - linear-gradient 概念

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

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

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

不要把它當作顏色用在color等樣式中。

使用方式

簡單起見，只講一種最通用的使用方式。

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

原理

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

如下圖所示:

angle的值其實就是以向頂部中央方向為起點順時針旋轉(zhuǎn)的角度。
0deg時可以看作是上圖垂直指向頂部的黑色虛線。

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

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

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

不需多言，盡在圖中。

示例 1 0deg 藍色起點紅色終點

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

2 45deg 藍色起點紅色終點

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

參考

MDN-linear-gradient

GPU云服務器云服務器 css3 css3氣泡 css3動畫 JS+CSS3

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

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

相關(guān)文章

CSS3-線性漸變

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

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

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

darryrzhong 2019-08-30 15:53 評論0 收藏0
淺探css3漸變

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

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

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

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

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

huangjinnan 2019-08-29 13:28 評論0 收藏0