[css 揭祕] ：CSS揭祕 技巧（五）：條紋背景

條紋背景

https://github.com/FannieGirl/ifannie/
問題：條紋背景 在設覺設計中無處不在，咱們真的能夠用css 建立圖案嗎？

這一章相對仍是比較複雜的哦！一塊兒get.
首先咱們作一個漸變的背景

橫條背景

如今咱們把這兩個色標拉近一點

這樣好像條紋背景 就出來了哦！不過這是橫向的，是否是還能夠豎線呢！確定是能夠的啦，看看多變的條紋背景

豎條背景

斜向背景

這樣的條紋背景仍是不夠靈活的。還有更好的方案

liear-gradient() 和 radial-gradient() 還各有一個循壞的增強版：repeating-liear-gradient() 和 repeating-radial-gradient() 他們的工做方式是跟前二者相似的，可是不一樣點是：色標是無線循環重複的，直到填滿整個背景。

靈活的同色繫條紋

通常狀況下，咱們想要的條紋圖案並非由差別極大的幾種顏色組成的，這些顏色每每屬於同一色系，只是在明度方面有着輕微的差別

實例演示地址：https://jsfiddle.net/06sjmL6n/13/

後言：
若是你對基礎的知識點已經很熟悉，你能夠自動跳過。寫上去的緣由是查漏補缺，鞏固一下基礎。
若是有不對的地方，歡迎你來吐槽。
本文主要參考《CSS 揭祕》一書 以及w3school；
參考連接 ：http://www.w3school.com.cn/cssref/pr_background-clip.asp