摘要:線性漸變的表達式看到線性漸變的表達式,又要開始用腦了,分拆開來其實很好理解。結果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉的。
線性漸變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個以上”
還是從實際案例中來深入理解,下面的測試結果都是基于firefox38.0
一、認識線性漸變的角度HTML中的body部分——
0deg
依次將里頭的“0deg”替換成“45deg”、“90deg”、“135deg”、“180deg”。
結果為——
線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉的。
二、兩個以上的漸變顏色和擾人的先看一個多個漸變顏色的實例。
上圖是從左到右的水平漸變方向,知道了漸變的總長度和起始點,就能一一確定
水平和垂直方向的總長度直觀上很好理解,無疑是區塊背景的寬度或者是高度。如果是非水平和垂直的漸變角度,該如何確定漸變的總長度呢?通過下圖來理解。
如圖所示,漸變的起點和終點在過中心的漸變線的垂直線上,給出一個區塊和漸變方向,就能夠確定漸變的起始點和總長度了,這樣有n個
實例:
HTML中的body部分——
三、總結
其實linear-gradient并不坑,理解了原理分分鐘玩轉漸變。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50132.html
摘要:線性漸變的表達式看到線性漸變的表達式,又要開始用腦了,分拆開來其實很好理解。結果為線性漸變中的角度默認是從下到上的垂直方向開始順時針進行旋轉的。 線性漸變linear-gradient的表達式:linear-gradient( [ | ,]? [, ]+); 看到線性漸變的表達式,又要開始用腦了,分拆開來其實很好理解。先從幾個實際的表達式講起: background-image:li...
摘要:分為線性漸變和徑向漸變。而我們今天主要是通過一個小例子來針對線性漸變來剖析其具體的用法。今天的例子就是用的線性漸變制作一個大致的針孔注射器。第一個參數表示線性漸變的方向,是從上到下是從左到右,如果定義成,那就是從左上角到右下角。 CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變)。而我們今天主要是通過一個小例子來針...
閱讀 2562·2023-04-25 18:13
閱讀 770·2021-11-22 12:10
閱讀 2970·2021-11-22 11:57
閱讀 2138·2021-11-19 11:26
閱讀 2164·2021-09-22 15:40
閱讀 1460·2021-09-03 10:28
閱讀 2704·2019-08-30 15:53
閱讀 1950·2019-08-30 15:44