387
玩壞css3之linear-gradient揭秘《線性漸變》
沒看《css揭秘》之前，我一般就會這樣使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff);
我相信很多同事對gradient認知也是到這裏，網上普遍也是這樣介紹！
正常的情況下：liner-gradient(pink,#fff)在div盒子中是自上而下漸變,如下圖：
.second{margin: 20px auto;width: 400px;height: 100px;background: linear-gradient(pink, #ffffff)}
接下來就是神奇的地方了！在此我再著重推薦一下《css揭秘》[LEA VEROU著]，大家可以看看
先解讀一下下麵的第一行代碼：
background: linear-gradient(-135deg, transparent 71px, #20B2AA 0) ；
background-size: 100% 100%;(這行代碼也很重要，為下麵的樣式做鋪墊,這個代碼不清楚的趕緊去w3c看）
background-repeat: no-repeat
首先大家都能理解：
第一個參數：線性漸變方向,
第二個參數：切角深度，（等下看展示效果再解析）
第三個參數： 就是漸變顏色，如果（#20B2AA 0）後麵不加0的話，默認情況下從#20B2AA漸變到#ffffff,所以用0代替，取消顏色漸變
如圖所示：（一些其他樣式的代碼就沒寫上去了，主要理解上麵的三行代碼就行了）
那個箭頭長度就是所謂的深度，也就是所謂的三角形斜角邊的高！（這個大家默認大家都會的啊）
有時候我們需要這樣的樣式：
這就要牽扯到background-size以及liner-gradient() top left(指定左上角)
`liner-gradient() top right`(指定右上角)
` liner-gradient() bottom left`(指定左下角)
`liner-gradient() bottom right`(製定右下角)
我們都知道，再怎麼顏色漸變都是平鋪過來的
那我們就可以指定 平鋪的大小！即通過（backround-size）
第一個角：就是左上角 且 平鋪的大小是1/4的div大小，那麼大小水平和豎直方向就是各50%，
同理：其他三個角平鋪的大小都是一樣的。即
background-size(50% , 50%)
第一個角平鋪：
background:liner-gradient(135deg, transparent 15px, pink 0) top left,(1)
第二個角平鋪：
background:liner-gradient(-135deg, transparent 15px ,pink 0) top right (2)
第三個角平鋪：
background:liner-gradient(-45deg, transparent 15px ,pink 0) bottom right (3)
第四個角平鋪：
background:liner-gradient(45deg, transparent 15px ,pink 0) bottom left (4)
總和代碼：
background: linear-gradient(135deg, transparent 15px, pink 0) top left,
linear-gradient(-135deg, transparent 15px, pink 0) top right,
linear-gradient(-45deg, transparent 15px, pink 0) bottom right,
linear-gradient(45deg, transparent 15px, pink 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
接下來自己嚐試下麵的圖形：
box-sizing: border-box;margin: 10px auto;width: 120px;height: 40px;line-height: 40px;
text-align: center;padding-right: 20px;
background: linear-gradient(-135deg, transparent 14px, pink 0) top right,
linear-gradient(-45deg, transparent 14px, pink 0) bottom right;
background-size: 100% 50%;
background-repeat: no-repeat;
轉載或引用本網版權所有之內容須注明“轉自（或引自）雲棲社區”字樣，並標明本網網址yq.aliyun.com
謝謝大家，獲取更多精華技術IT資訊，請持續關注雲棲社區“達摩老祖”and"碼上有錢"
需要購買阿裏雲各種產品，點擊文字鏈領取阿裏雲通用打折劵
最後更新：2017-07-20 23:04:22