純css3實現斑馬線repeating-linear-gradient和linear-gradient的妙用
今天睡得太早，結果晚上12:45的時候就醒過來了。現在想起小時候，實在是羨慕，那時候9點鐘睡了，到早上上學的時候還是迷迷糊糊的要睡覺的感覺，現在特羨慕那時候那麼能睡。
今天是週一了，兩天的休息日已經過去了，想想挺浪費的，這兩天就純呆家裡玩LOL，上週週五下班的時候還給自己定了很多目標結果就執行了一個，而且效果差池人意。
實在是睡不著，趁這個時間，把上週六晚上學到的一個css3背景效果記錄下，方便下次查詢
這個知識點，我查詢了很多部落格和文件，部分文字直接複製w3cplus的
注意紅色部分的疑問點
下面我們要實現這樣的一個效果:
先講一下css3多個背景：
程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .d1{ background-image:url(1.jpg), url(2.jpg); background-size: 50px 50px; background-position: 0 0,30px 0; background-repeat: no-repeat; width: 600px; height: 600px; } </style> </head> <body> <div class="d1"></div> </body> </html>
效果：第二個背景被第一個背景給遮住了，第一個背景比第二個背景的z-index高，我不大清楚我這裡要表達什麼，但知道這個情況就可以了
現在我們嘗試使用純linear-gradient和background-size實現相同的條紋效果。我們將一個方形的背景加上帶有角度.25em寬度黑色條紋和.5em寬度的藍色條紋。一個正方形的對角線是直角邊的√2(根號二)。如果我們知道對角線長度是.25em
+ .50em = .75em，然後background-size的尺寸是.75em
/ √2。
程式碼如下所示：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ font-size:40px; } div{ width: 200px; height: 200px; color:#fff; } .pt1_7{ /*1em等於40px 藍 .25em為10px 黑-------.5em為20px 如果按照正方形的正方形的對角線是直角邊的√2 那對角邊為 （.25+.5）/Math.sqrt(2)*40 約等於21 轉換為px就是 (10+20) /Math.sqrt(2) 約等於21 */ background: linear-gradient(135deg, #000 .25em, #0092b7 0);//疑問1.為什麼這裡是0而不是.5em？background-size: 21px 21px; } </style> </head> <body> <div class="pt1_7"> 1EM </div> </body> </html>
效果:
這並不是我想要的；
那我們試一下其他方式，例如.25em的黑色條紋放在中間呢？讓我們試試！
background: linear-gradient(135deg,
#0092b7 calc(50% - .125em) /* blue corner */, /*疑問2：這裡的.125是怎麼得到的*/
#000 0, #000 calc(50% + .125em) /* black stripe */,
#0092b7 0 /* blue corner */
);
效果：
是不是比我們的效果有點類似了【除了黑色條紋右下角【黑色漸變結束】和左下角【黑色漸變開始】少了一個類似三角形的一塊】
細心對比能發現，這些缺塊將黑色條紋寬度一半(.25em的一半就是.125em)【解答疑問一】。
下面我們的工作就是把這個缺的三角形塊補回來：
background: linear-gradient(135deg,
#000 .125em /* black corner */,
#0092b7 0, #0092b7 calc(50% - .125em) /* blue stripe */,
#000 0, #000 calc(50% + .125em) /* black stripe */,
#0092b7 0, #0092b7 calc(100% - .125em) /* blue stripe */,
#000 0 /* black corner */
);
效果:
但這不是最終效果，因為我們呢的rem轉px存在誤差，還有我們多了倆個半條黑色條紋 這直接導致對角線的計算不正確。從左上角到右下角，我們現在有一半的黑色條紋(.125em)，藍色條紋(.5em)，黑色條紋(.25em)，另一個藍色條紋(.5em)和另一個半的黑色條紋(.125em)。所以加起來對角線是1.5em。這意味著我們需要改變background-size的值為1.5
em / √(2) 1.5 em /√(2)約等於42px修正後可以看到效果如下圖:
/******************************疑問一，今天下班再做詳細解答實在是困了，現在是2016/3/14凌晨3:25********************************/
在解答疑問一和為什麼開篇的時候我示範了多個背景“z-index”，我們先看一個簡單例項，這會解開更多疑惑：
css：
background: linear-gradient(135deg,
#000 20px,
#0092b7 40px,
red 80px,
#0092b7 200px);
我想寫一個由20px #000、20px #0092b7、40px red、120px #0092b7 四條色塊組成的div，可看到以上程式碼實現效果如下：
的確可以生成了四條色塊組成的漸變div
問：可是這又能怎麼樣？效果本來就是這樣的
答：
background: linear-gradient(135deg,
#000 20px,
#0092b7 40px);
A.程式碼紅色部分為當前顏色在對角線上終止的位置，#000的終止位置為20px，#0092b7為終止位置為40px，但是相鄰的色塊直接會互相侵染,實際值永遠不會是我們寫的終止位置的那個數值[如果我們要的是斑馬線呢？]
B.所有色塊的實際終點位置都為div對角線最大值，前面的顏色值生成的色塊永遠比後面寫入的顏色塊的z-index高，前面的顏色塊會覆蓋後面的顏色塊[這是開篇前第一個例項的目的]
/*我寫不下去了，感覺自己還是搞不懂*/
徑向漸變：http://blog.csdn.net/playboyanta123/article/details/9303857