CSS 語法 06:顏色/漸層 color / gradient

顏色

在 CSS 設定顏色的值有三種表示方式:

  • 十六進位值
  • 顏色名稱
  • RGB 比例

要查詢顏色代碼可以用 Google 搜尋「color picker」就會出現一個選色器,可以取得十六進位代碼和 RGB 比例值。

十六進位代碼如果前兩碼、中間兩碼,和後面兩碼,兩兩相同,則可以用三碼表示。比如說:#FF3366 可以用 #F36 表示。十六進位代碼通常以#字號作為開頭。

RGB 則有兩種表示方式,一種是每組由0~255之間的數字表示,另一種是用 0%~100% 表示

p { color:#e33679; }

#e33679

p { color:blue; }

blue

p { color: rgb(0,189,113); }

R:0, G:189, B:113

p { color: rgb(0%,80%,40%); }

R:0%, G:80%, B:40%

 

漸層色

如果你想要使用漸層色,像這一頁這麼騷包,可以從這個網站取得CSS碼 ▶ Blend

再把它貼到你想要宣告的選擇器裡面,比如說 body 還是某個 div 裡面。

如果你只要變更這一頁,而不是網站裡所有的頁面,那你可能需要安裝 Code embed 來個別設定 CSS。

請參考:怎麼在個別文章/頁面加入 javascript 或 CSS?

▼像我這一頁的區塊套用一個選擇器叫做「pad」,所以我安裝了 Code Embed 後就在自訂欄位貼上如下宣告。

<style>
.pad{
background: -webkit-linear-gradient(90deg, rgb(255, 208, 222), rgb(255, 246, 108));
background: linear-gradient(90deg, rgb(255, 208, 222), rgb(255, 246, 108));
}
</style>

如果你是直接貼在「外觀 > 自訂 > 進階 > CSS」裡面的話,就把前後的<style>和</style>去掉。