3. 顏色

在css中可以改變顏色，在之前的例子中可以看到，我們可以改變文字顏色，或是背景顏色。 還有其他許多地方例如邊框顏色等都會使用到顯示顏色的功能。那麼有哪些方式可以表示顏色呢? 通常可使用以下幾種。
  1. 第一種為直接給顏色名字，在HTML中支援許多的顏色名稱，在之前的例子中已出現數個， 其他名稱可參考>>這裡。
  2. 第二種方式為使用16進位法的方式來表示，在顏色名稱的網站內有一欄為HEX，便是16進位的表示法。 當我們使用的時候，把之前使用顏色名稱改變為16進位法即可，記得之前有一個#字號。例如:#FF0000表示紅色， 每兩個數字為一組，分別表示紅綠藍三原色，每個部分數字大些，該種顏色的比例就多點。
  3. 第三種方式為RGB表示法，還是一樣紅藍綠，只是使用0-255的數字來表示，數字越大顏色比例越多。例如:


    在css內加上程式碼如下:

    顯示如下:

    雖然class名稱可以隨意取，不過最好還是有意義

  4. 第四個方式為RGBA表示法，這跟第三種相同，多出一個為不透明度，數值介於0-1.0之間，數值越大表示透明度越差。例如:


    在css內加上程式碼如下:

    顯示如下:

    RGBA的A表示Opacity

    可以看出背景顏色變淡了。
  5. 一般來說，以上三種應已足敷使用，另外尚有HSL及HSLA表示法，其中H表示顏色，0-119為紅色，120-239為綠色，240-359為藍色。 S表示顏色的百分比，L表示光亮的百分比，A顯然還是不透明度。舉例如下:

    在css內加上程式碼如下:

    顯示如下:

    HSLA的用法

    請自行調整數值看顏色變化。

漸層色

漸層色是顏色的變化，可分為線性(Linear)及放射狀(Radial)兩種。其語法為:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: radial-gradient(shape size at position, start-color, ..., last-color);
先試線性的例子。



css code:


顯示如下:


預設值是由上往下，若是要改變方向可使用指令to right, to left, to top等。例如使用:
background: linear-gradient(to right, blue, pink);


也可以把方向用角度表示，使用類似0deg, 90deg, 180deg等來替代to right, to left等。例如使用:
background: linear-gradient(45deg, black, white);表示往45度角方向。 方向的定義為往上0度，然後順時針方向增加。也就是說0deg指to top，90deg指to right。



若想使用多於兩種顏色，則將顏色都寫進去即可。例如使用:
background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);



表示顏色若是使用例如rgba則可以再將opacity應用上去。

可以使用background: repeating-linear-gradient(red, green 25px ,blue 50px); 指令來重複漸層色，其中的止色長度也可以使用百分比來表示。

radial-gradient



放射狀漸層跟線性指令類似，例如使用background: radial-gradient(red, green ,blue);

同樣可以控制其大小，例如改為background: radial-gradient(red 10%, green 30%,blue 50%);

可在顏色之前加上circle使得放射狀為正圓。也可移動中心位置，使用at關鍵字。例如:
background: radial-gradient(at 10px 50px , red, green ,blue );

若是沒有使用at，則表示形狀的大小。若是圓形僅可使用一個數值，因為只需要半徑。
與線性漸層類似，可以使用repeating-radial-gradient指令來重複漸層。