CSS3學習筆記之linear gradient

我覺得css3很不錯，自己也稍微看過，並且嘗試過一些屬性。對我自己而言，我沒有勇氣說我學過css3，我覺得任何自己看來很小的事情，也只是站在自己的角度來評判。就算的是「簡單的」html在我看來也是很值得研究的，只有時刻保持乙個謙遜的姿態，才能夠看得更遠，走得更穩。

在這裡要感謝一下**：

w3cplus

，w3school

，w3c

等等一些網上的教程啊部落格什麼的（還有好多就不一一枚舉了），我算是從這些地方開始接觸傳說中的css3和html5，而自己的學習筆記自然也會從中借鑑。

建議：大部分css3的屬性尚在草案之中，使用的時候最好還是都加上各自瀏覽器的私有字首

eg：

在剛開始的時候，在webkit下使用的是：

-webkit-gradient(, [, ]?, [, ]? [, ]*) //老式語法書寫規則

而到現在，在webkit下使用的是：

-webkit-linear-gradient( [|| ,]? , [, ]* )//最新書寫語法

現在，新式語法與其他瀏覽器，包括firefox，opera的語法書寫統一（現在的opera已經使用了webkit核心）；

其實gradient，分成兩種一種是線性漸變（linear-gradient），另一種是徑向漸變（radial-gradient）。我們可以將linear-gradient和radial-gradient新增到任何可以接受的屬性，比如：backgorund-images，list-style-image等等。今天我要介紹的就是標題上的linear-gradient。

linear-gradient最簡單的語法：

linear-gradient(起點，開始顏色，結束顏色);

漸變起點有很多種寫法：

1、使用top，right，bottom，left中的乙個來指定漸變的起點

right組合來改變漸變起點。但是切記：top不能和bottom組合，left不能和right組合

3、上面兩種寫法只能夠畫出有限的幾種漸變。我們可以使用角度來設定漸變的起點。

以下面的**為模板，將「0deg」修改成你想要的角度

.deg0

根據結果，我又畫出了這張圖

可以看出，在使用角度設定漸變起點的時候，0deg對應botton，90deg對應left，180deg對應top，360deg對應right。整個過程就是以bottom為起點逆時針旋轉。

關於起點的內容我暫時只了解到這麼多，以後如果草案做了修改，我了解之後會立馬更新。

漸變顏色設定也可以花樣繁多：

漸變的顏色可以不止兩種，在起點顏色和終點顏色之間可以新增更多顏色。

.test

上面的例子中，顏色的漸變都是均勻的，我們也可以給每一種顏色指點漸變的位置，從而使漸變不是單純的均勻變化，這個也很簡單，只要在你想修改的顏色後面加上漸變的文職就可以了。為了簡單直觀，我只用三種顏色。

均勻變化

新增了位置後

當然，如果顏色格式使用css3中的rgba格式，那麼漸變將會是透明的。

等我研究了徑向漸變（radial-gradient）我在不上徑向漸變的筆記

css3學習筆記之邊框

123 4567 891011 1213 1415 1617 1819 20 html head style t1 body divid t1 border radius 屬性允許您為元素新增圓角邊框！box shadow12 3456 78910 1112 1314 1516 1718 19 ht...

css3學習筆記

1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...

CSS3學習筆記

一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...