漸變效果我們多知道他是怎麼個東西，但是你真的知道深層次的漸變效果嘛？
一般的漸變效果
.container
{width
: 200px;
height
: 100px;
background
:linear-gradient
(#fb3, #58a)
;
這個效果我們都知道，那麼他為什麼是這種漸變呢？
加幾個引數試試？
background
:linear-gradient
(#fb3 0%, #58a 100%)
;
我們發現他並沒有變化，我們再把這個拉近點試試。
background
:linear-gradient
(#fb3 40%, #58a 60%)
;
是不是發現有什麼不對？
我們再拉近點試試。
發現了沒，我們這兩個值越趨近漸變效果就越來越弱。為什麼呢？
漸變原理
background
:linear-gradient
(#fb3 40%, #58a 60%)
;
容器頂部到40%的區域和從容器底部到容器的40%區域(以向上計數)被填充為實色，其實真正的漸變發生在容器頂部40%到容器頂部60%這20%的區域，如果我們將這兩個的差距不斷縮小，那麼就會形成乙個無限小區域的漸變，這個時候container就會被實色所覆蓋。這就是漸變的原理。
斑馬條紋效果
由於漸變也是屬於背景，我們完全可以調整背景寬高。
background
:linear-gradient
(#fb3 50%, #58a 50%)
;background-size
: 100% 30px;
由於背景的height小於容器的高度，所以由於repeat效果，漸變效果就會重複，斑馬條紋就會生成。
不等寬條紋效果
不等寬條紋效果其實就是漸變顏色不均勻造成的。
/* 0%從距離30%開始漸變到頂部 */
background
:linear-gradient
(#fb3 30%, #58a 0%)
;background-size
: 100% 30px;
不同顏色條紋效果需要三種顏色，而且需要接著先前的漸變追加
background
:linear-gradient
(#fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 0)
;background-size
: 100% 30px;
垂直條紋效果就是將漸變方向改變一下。
background
:linear-gradient
(90deg, #fb3 33.3%, #58a 33.3%, #58a 66.6%, yellowgreen 0)
;background-size
: 30px 100%;
斜向斑馬條紋效果
這裡很多同學通常認為，只需將方向變為45deg即可，但是其實這是錯誤的方法。不信大家可以自己試試。
錯誤的**
background
:linear-gradient
(45deg, #fb3 50%, #58a 0)
;background-size
: 30px 30px;
這樣的原因在於我們只是把每個貼片內部的漸變旋轉了45°，而不是把整個重複的背景旋轉了，其實仔細觀察我們會發現每乙個等長等寬的貼片都是有四個漸變顏色。所以正確的**應該是。
正確的**
background
:linear-gradient
(45deg, #fb3 25%,#58a 25%, #58a 50%, #fb3 50%,#fb3 75%, #58a 75%, #58a 100%)
;background-size
: 30px 30px;
background
:linear-gradient
(45deg, #fb3 25%,#58a 0%, #58a 50%, #fb3 0%,#fb3 75%, #58a 0%)
;background-size
: 30px 30px;
但是我們會發現這個背景的角度並不是真正的45°，所以我們需要計算背景的大小。根據再學校的勾股定理，如果我們要保持每個條紋之間有15px的漸變寬度，那麼每15px漸變寬度就需要15 * √2 px寬度，所以長度應該是30 * √2 px = 42.426px
接下來我們重新設定背景大小
background
:linear-gradient
(45deg, #fb3 25%,#58a 0%, #58a 50%, #fb3 0%,#fb3 75%, #58a 0%)
;background-size
: 42.426px 42.426px;
新css3屬性設定漸變效果
很多人就說這樣做漸變效果是不是太麻煩了？確實這樣很麻煩，所以css3有乙個新屬性repeating-linear-gradient，與linear-gradient工作方式類似，只有一點不同：色標是無線迴圈重複的，直至填滿整個背景。比如我們來實現一下剛才45deg漸變的斑馬條紋。假設每個漸變條紋寬度15px
background
:repeating-linear-gradient
(45deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px)
;/*我們甚至不用設定北京大小*/
接下來我們再來實現乙個60deg的斑馬條紋效果
background
:repeating-linear-gradient
(60deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px)
;
ok，漸變的效果就差不多到這裡了
css實現漸變效果
div style filter alpha opacity 30 finishopacity 0 style 1 progid dximagetransform.microsoft.gradient startcolorstr red,endcolorstr blue,gradienttype 1...
CSS3漸變效果
css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前，這種效果必須採用才能實現的。方位可選引數，漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...
css 按鈕顏色漸變效果
從左到右的漸變效果 顏色可設定雙色 百分比可不要 background moz linear gradient left,ffb9da0 ff98c750 ffffff 100 background webkit linear gradient left,ffb9da0 ff98c750 fffff...