iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

CSS大全閱讀筆記系列 第 17

第四章:數值與單位(6)

  • 分享至 

  • xImage
  •  

(接上篇顏色部分)


  1. 顏色:
    b. HSL與HSLa色彩:
    - HSL是指色相(Hue)、飽和度(Saturation)與亮度(Lightness)。
    - 色相:是指0到360度的色相角度,但不是<angle>數值,不需要加上單位,其中(在飽和度為100%,亮度為50%的情況下)0度是紅色(#FF0000)、60度是黃色(#FFFF00)、120度是鮮綠色(#00FF00)、180度是青色(#00FFFF)、240度是藍色(#0000FF)、300度是洋紅色(#FF00FF)。
    - 飽和度:色彩的濃度,以百分比表示,0%時不論色相角度如何,都會得到灰階,100%時會得到該色相角度下最鮮豔的顏色。
    - 亮度:色彩的亮度,以百分比表示,0%的亮度下,不論色相角度與飽和度如何,一律會得到黑色,而100%的亮度下,一定是白色。
    - HSLa色彩中的a,與RGBa中的a是完全相同的,使用方式也相同。
    c. 色彩關鍵字:
    - transparent:意為顏色完全透明,等同於rgba(0, 0, 0, 0),少用在文字顏色中,但在元素背景顏色中常用,另外在漸層定義中也常使用到這個關鍵字。
    - currentColor:意思是使用目前元素所定義的color屬性數值,所以會使用和目前元素文字相同的顏色,如果沒有設定文字顏色,currentColor會是使用者代理定義的預設顏色(通常為黑色),所以像是main{color: red; border-color: currentColor;}。這個例子中,border-color會是紅色。
  2. 角度:
    a. 一般以<angle>表示,由一個<number>與單位構成。
    b. 角度使用單位:
    - deg:角度,0到360度。
    - grad:梯度(gradians),將一個圓切為400等分,也稱為grade或gon。
    - rad:弧度,一個圓等於2π。
    - turn:轉(turn),一個圓就是一個轉,這個單位通常用在動畫旋轉效果中表示要轉幾次,但不管轉幾次,都不可以寫成turns
    - 角度單位的轉換中,0deg=0grad=0rad=0turn,90deg=100grad=1.571rad=0.25turn,360deg=400grad=6.283rad=1turn。

上一篇
第四章:數值與單位(5)
下一篇
第四章:數值與單位(7)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言