linear-gradient()影象漸變屬性詳解
對於linear-gradient()我學習的時候，查了很多資料，但是發現不管是網上還是一些書籍，都沒有將這個屬性的運用講得明白，清楚，對此，我寫了這篇部落格，雖然不能保證每一位讀者都能夠看懂，但是也希望這篇部落格能為你提供一些幫助，如有問題，請在部落格中提出，謝謝。
首先給大家講的就是相容性，在IE瀏覽器中這個屬性的設定是不相容的，當然在IE瀏覽器中也可以實現類似的效果，那邊是濾鏡(fliter)的作用了.其他的不同的瀏覽器也是有不同的，比如chrome一般要加-webkit-字首，如：-webkit-linear-gradient，比如opera就是-o-linear-gradient。
linear-gradient
如下是簡單的linear-gradient的使用
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>linear-gradient</title> <style type="text/css"> *{margin:0;padding:0;} .posDir{margin:100px auto;} .linearBar{width:100px;height:100px;border:1px solid #ccc; background-image:linear-gradient(45deg, #000,#fff); /*********************************偏向角度,起始點顏色,終止點顏色***************/ } </style> </head> <body> <div class="linearBar posDir"></div> </body> </html>
效果:
這裡提到了background-image:對這個屬性進行linear-gradient,簡單的說這個linear-gradient設定是針對圖片的，所以必須是放圖片的屬性才能運用這個linear-gradient進行設定.
除了以上的角度使用(40deg),除此之外，還有提供的一些類似於C語言中的常量的東西,如下:
linear-gradient(left bottom, #000, #fff);這個用來代替上面background-image中linear-gradient會產生一樣的效果。
其中，第一個選項可以是top, left, bottom, center, right.以上是對於最常見的兩種顏色的使用，但是這並不能滿足我們的需求，
所以多種顏色的運用是必不可少的，接下來就是多種顏色的講解。
background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033);將程式碼中的background-image改為如上程式碼，會呈現如下效果:
如此，這效果，是#99CC33, #FF6666,#336699,#FF0033均勻分佈產生的結果，自然預設是均勻的，那麼自然也存在不均勻的，這就需要我們自己設定了，這也是網上資料坑爹的地方，他們沒有對這一屬性的使用進行簡單明瞭的講解，所以我來插一腳，寫一個:
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);我加了一行這個:background-color:#33CC99;呈現的效果如下:
如此便是有一個運用，那就是程序條，當我們將這個東西運用到實際的時候，會發現，這個東西形成的東西如此美觀，程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微軟雅黑";}
.progress{margin:100px auto;width:80%;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px;
height:20px;overflow:hidden;background-color: #f5f5f5;}
.progress-bar{float:left;width:0;height:100%;line-height:20px;color:#fff;text-align:center;
background-color: #5cb85c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);}
.progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size:40px 40px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
</div>
</body>
</html>效果如下:
如上的效果中的間隔式的波浪便是漸變的效果，是不是非常的美觀好看，此中還有個background-size這個設定，這是為了設定漸變圖片大小,當然大家還是會疑惑，為什麼會出現這樣的效果，其中還有個預設的屬性background-image:repeat重複，我們設定的圖片只有40px, 40px這樣只會產生一個圖片，只有進行重複才能形成上面的效果，也許大家會疑惑，為什麼要設成40px 40px程序條的高度至於20px，可不可以寫成20px 20px,答案可以告訴大家，肯定可以，但是並不美觀，大家可以思考思考。
linear-gradient便是講到這裡，可能其中存在什麼缺陷，我日後會進行修改更新。