有趣的CSS之漸變

概念

1. 種類

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
• 徑向漸變（Radial Gradients）- 由它們的中心定義

2. 語法

background: linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? n<color-stop>[, <color-stop>]+,)n<side-or-corner> = [left | right] || [top | bottom]ndirection defalut:to bottomnnbackground: radial-gradient(radial-gradient(n [ [ circle || <length> ] [ at <position> ]? , | n [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |n [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |n at <position> ,n ]?n <color-stop> [ , <color-stop> ]+n)n<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-siden

3. 理解色標

我們可以在每個顏色值後面加上數值，單位可以是px或%，數值的意義可以理解為對應顏色的位置，例如linear-gradient(red 40%,blue 60%)，表示的是紅色到藍色的漸變區域從40%開始到60%結束，0%~40%為紅色的實色填充，60%~100%為藍色的實色填充，當我們將兩個色標都設置為50%時，漸變區域便消失了，此時出現從第一個顏色到第二個顏色的突變，這讓我想到了多重背景色..

思考：當第二個色標比第一個色標小的時候，第二個色標默認為第一個色標的值，當多餘兩個色標時，如果某個色標的位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設置為它前面所有色標位置值的最大值。基於這點，我們可以簡化我們的代碼，例如：

background:repeating-linear-gradient(n red 0, red 12.5%,n #fff 0, #fff 25%, //0將指定為12.5%n #58a 0, #58a 37.5%, //0將指定為25%n #fff 0, #fff 50%); //0將指定為37.5%n

由於漸變是由代碼生成的圖像，所以我們可以用代碼的方式設置它background-size,background-position...等等，最令人興奮的一點是漸變是可以疊加的！不同方向，不同種類的漸變疊加最終可以生成各種複雜生動有趣的圖案，下面就開始我們的探索之旅吧

漸變的探索

1. 同色系條紋

如下圖，當條紋方向垂直時，我們可以通過設置背景圖像的大小來產生條紋圖案，當要產生斜條紋背景圖案時，我們選擇用為每個色標指定長度的方式。如果要產生同色系條紋，我們需要指定一個背景色，然後再背景色上平鋪透明和半透明相間的條紋背景，這個小技巧很實用哦，可以用來做卡片head，進度條等

2. 網格

0deg和90deg方向的條紋疊加可產生網格效果，如下圖：

代碼+註解：

網格一

.pic1{n background-image:n linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),/*圖1-1*/n linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);/* 圖1-2 */n background-size: 30px 30px; /*圖1-3 默認平鋪 */n}n

網格二

.pic2{n background: #58a;n background-image:n linear-gradient(white 1px, transparent 0), /*一像素寬的水平白條*/n linear-gradient(90deg, white 1px, transparent 0); /*一像素寬的垂直白條*/n background-size: 30px 30px;n}n

網格三

.pic3{n background: #58a; n background-image:n linear-gradient(white 2px, transparent 0), /*在水平75px處的2px白條*/n linear-gradient(90deg, white 2px, transparent 0), /*在垂直75px處的2px白條*/n linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),/*在水平15px處的1px灰條*/n linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);/*在垂直15px處的1px灰條*/n background-size: 75px 75px, 75px 75px,15px 15px, 15px 15px;n}n

3. 邊框背景

我們想用圖片作為邊框背景，通常想到用兩個元素來實現它，外層div給一個背景圖片，內層div給一個白色背景，如果只用一個元素呢？我們來試試漸變疊加的思維方式吧

要思考的問題是白色的實色背景如何用漸變去實現？答案很簡單，白色到白色過渡就行了

下面我們開始實現邊框背景，效果如圖《邊框背景-1》

.box{n padding: 1em;n border: 1em solid transparent;n background: linear-gradient(#fff, #fff),url(./bg.jpg);n background-size: cover;n background-clip: padding-box, border-box;n background-origin: border-box; /*默認為padding-box*/n}n

上述指定白色面板的裁剪屬性為padding-box，忽略邊框，而背景圖案從邊框處開始平鋪，並修正整個背景圖的源點為border-box，使背景圖的邊緣貼合盒子邊框

我們有了白色的面板之後，背景圖案也可以用漸變疊加來代替，老式信封的邊框是斜條紋背景，我們用之前討論過的斜條紋背景來實現這個效果，如圖《邊框背景-2》

.mailBox{n padding: 1em;n border: 1em solid transparent;n background: linear-gradient(#fff, #fff),n repeating-linear-gradient(-45deg,n red 0, red 12.5%,n #fff 0, #fff 25%,n #58a 0, #58a 37.5%,n #fff 0, #fff 50%) 0 / 4em 4em; n background-clip: padding-box, border-box;n background-origin: border-box; n }n

為消除歧義，在 background 簡寫屬性中指定 background-size 時，需要同時提供一個 background-position 值(哪怕它的值就是其初始值也需要寫出來)

接著，如果我們把邊框縮小到一像素，不就是一條虛線了嗎？並且如果我們不斷改變『虛線』的位置，視覺上就能產生滾動的效果，類似當選框被選中時的效果，如圖《邊框背景-3》

.box-ant {n padding: 1em;n border: 1px solid transparent;n background: linear-gradient(white, white) padding-box,n repeating-linear-gradient(-45deg,n black 0, black 25%, white 0, white 50%n ) 0 / 0.6em 0.6em;n animation: ants 12s linear infinite;n }n @keyframes ants {n to {n background-position: 100%n }n }n

效果圖

4. 折角

我們可以用經典的邊框技巧來實現折角效果，但是這種方法有一定的局限性，第一它的背景是純色的，第二折角的角度難控制。現在我們用漸變來的方式來實現它！

我們想像一下紙張右上角折了一個45°的小角，現在我們來實現它

首先在右上角畫一個為45°的小三角形，用一個有角度的線性漸變，將實色和透明色在中央重合，指定background-size為2em，它代表的是水平和垂直方向的距離，並且不平鋪，再在相同方向疊加一層缺角的背景漸變，此時根據勾股定理計算出漸變軸方向的距離為1.44em，疊加之後，效果圖如上所示。

.corner-45 {n background:n linear-gradient(-135deg,transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,n linear-gradient(-135deg,transparent 1.44em, #58a 0); n }n

接下來我們改變角度為30°，改變角度後，小三角形的尺寸也要做相應的調整，我們設定漸變軸的距離為1.5em，根據勾股定理計算出小三角形的邊長分別為3em，1.73em，調整之後是這樣的

.corner-30{ n background:n linear-gradient(-150deg,transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 3em 1.73em,n linear-gradient(-150deg,transparent 1.5em, #58a 0);n n}n

不過，這效果圖看著很奇怪吧

事實上，折角是傾斜一點的，那麼我們要做的就是把小三角形傾斜一些角度，那麼用偽元素改造一下，首先把三角形改成缺口三角形的軸對稱圖形，做法是調換一下長度和寬度，這裡別忘了把漸變的角度改成60°，由於我們的邊框是固定的，知道兩條邊的長度可以算出角度，所以我們可以直接用to left bottom來代替固定的角度，用勾股定理算出偏移的長度是1.27em，然後以左上角為原點旋轉30°，就ok了

為了讓效果圖更加逼真，我們為「紙張」添加圓角，小三角形用由淺到深的漸變色代替純色，（上面提到過，這裡用邊框技巧做的三角形是做不到這一點的），「紙張」缺角的右上角變成了三角形的左下角，也為它單獨加上圓角，最後為小三角形加上陰影

.box-gradient{ n position: relative;n background:linear-gradient(-150deg,transparent 1.5em, #58a 0);n border-radius: .5em;n}n.box-gradient:before{n content:;n position: absolute;n top: 0; n right: 0;n background: linear-gradient(-120deg,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4) 100%);n width: 1.73em;n height: 3em;n transform-origin: left top;n transform: translateX(-1.27em) rotate(-30deg);n border-bottom-left-radius: inherit;n box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);n}n

5. 更多...

6.參考

• w3 css3規範
• CSS3揭秘

推薦閱讀：