垂直條紋
背景知識：css線性漸變，background-size
background
:linear-gradient
(red, yellow, blue)
;background
:linear-gradient
(red 0%, yellow 50%, blue 100%)
;background
:linear-gradient
(to right, red 0%, yellow 50%, blue 100%)
;background
:linear-gradient
(90deg, red 0%, yellow 50%, blue 100%)
;
to right代表漸變偏移角度，to right(相當於90deg)
red，yellow，blue代表漸變色，表示從red - yellow - blue (相當於red 0% - yellow 50% - blue 100%)。 意思是從0%距離處為red，通過0%-50%的距離漸變到yellow，再通過50%-100%的距離漸變到blue。
linear-gradient(90deg, red 0%, yellow 50%, blue 0)等價於
linear-gradient(90deg, red 0%, yellow 50%, blue 50%)因為當你的色標位置值設定為0時，會自動調整為前乙個色標位置值。
linear-gradient(90deg, red 20%, yellow 50%, blue 100%); 代表從0-20%都為red色。
linear-gradient(90deg, red 20%, yellow 20%, blue 100%); 代表從20%處顏色突然變化為yellow。（20%-20%之間沒有漸變距離）
linear-gradient(90deg, red 20%, yellow 20%, yellow 50%, blue 100%); 代表從20% - 50%處都是黃色，然後從50%處開始漸變直到100%變化為blue
line-gradient中相鄰的兩個顏色值代表，從色標a漸變到色標b。
顏色後緊跟的數值，代表ab兩個顏色之間的漸變區間。（差值為漸變區間的長度，若差值為0，則為突變）
顏色後的數值為0時，自動取前一位的數值。
/* 關鍵字 */
background-size
: cover
background-size
: contain
/* 乙個值: 這個值指定的寬度，的高度隱式的為auto */
background-size
: 50%
background-size
: 3em
background-size
: 12px
background-size
: auto
/* 兩個值 */
/* 第乙個值指定的寬度，第二個值指定的高度 */
background-size
: 50% auto
background-size
: 3em 25%
background-size
: auto 6px
background-size
: auto auto
cover代表背景覆蓋背景尺寸，可能只能看到放大後的背景的一部分。
contain代表背景裝入背景尺寸，可能會看到背景留白。
兩個值分別為寬，高，高可以省略，預設auto
摘自mdn background-size首先我們來實現一下水平條紋的效果。
我們了解了line-gradient的能力之後。我們可以通過極端縮小兩個顏色之間的過渡間距來實現顏色突變的效果。background: linear-gradient(#fb3 50%, #58a 50%);
css影象（第三版）：如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域。過渡的起止色分別是第乙個和最後乙個指定值。從效果上看，顏色會突然變化，而不是乙個平滑的漸變過程。目前看來我們已經實現了兩個巨大的條紋，分別佔據一半的高度。接下來我們再加上background-size的能力。
background-size: 100% 20px;我們通過控制背景的尺寸，高度設定為20px，那麼，各佔50%背景尺寸高度的實際尺寸就變成了10px高。再加上背景的預設是重複平鋪的，所以就實現了條紋的效果了。
現在實現了兩種顏色的交叉條紋。那麼如果三種顏色，四種顏色怎麼辦呢？我想看到這裡大家思考之後都會知道如何實現。
水平條紋的顏色基本都可以實現了background:linear-gradient
(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0)
;background-size
: 100% 60px;
我們再來嘗試嘗試加上透明度的效果
加上了透明度配合漸變，實現了一些立體凹陷和飽滿的條紋效果。
實現過了水平條紋，垂直條紋還不是手到擒來。
我們只需要在上述的水平條紋**中做兩處改變即可。
漸變裡引數新增角度，to right 或者 90deg
background-size 引數互換位置。
background:linear-gradient
(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0)
;background-size
: 60px 100%;
CSS揭秘 條紋背景
不管是線性漸變，還是徑向漸變。它們都是用來設定元素的背景影象。background image屬性可以為乙個元素設定乙個或者多個背景影象。這些影象在繪製過程中，以z方向堆疊的方式進行，也就是先指定的影象會在後指定的影象上面繪製，也就越接近使用者。元素的border會在背景影象之上繪製 別忘了前面講的...
CSS揭秘之《條紋背景》
先來說說漸變吧 background linear gradient fb3 20 58a 80 效果圖如下所示 也就是說真正的漸變只出現在容器 60 從20 到80 的高度區域 如果把兩個色標合在一起，會怎樣呢 w3c是這樣規定的 如果多個色標具有相同的位置，它們會產生乙個無限小的過渡區域，過渡的...
CSS實現橫紋 豎紋 斜紋漸變條紋背景的方法 上
2016 09 26 09 17 網頁設計 安南子 5615 css發展到今天，關於 背景已經不僅僅侷限於單色的。現在漸變色彩已經很成熟了，我們只要稍微加以利用，那麼就可以實現出不同的效果。css 揭秘作者就通過 的形式寫出了各式各樣的css背景 大家可以查閱下。首先我們需要明白條紋背景是怎麼來的？...
