Prefix

  • IE: -ms
  • Firefox: -moz-
  • Chrome: -webkit-
  • Safari: -webkit-
  • Opara: -o-

顏色

  • rgb(<red>, <green>, <blue>)
  • hsl(<hue>, <saturation>, <lightness>)
    • hue：色調，表示色盤角度
    • saturation：飽和度，100% 表示最高
    • lightness：亮度，0% 最暗，100% 最亮，50% 為 normal
  • rgba(<red>, <green>, <blue>, <alpha>)
    • alpha：透明度，0 完全透明，1 完全不透明
  • hsla(<hue>, <saturation>, <lightness>, <alpha>)

圓角

  • border-radius: <value>
    • 1 個值：四個角
    • 2 個值：左上右下、右上左下
    • 4 個值：左上、右上、右下、左下

陰影

  • box-shadow: <水平位移> <垂直位移> <模糊半徑>[ <擴散距離>] <顏色>[ inset]
  • text-shadow: <水平位移> <垂直位移>[ <模糊半徑>]
  • 可設定多組，以 , 分隔

漸層

  • linear-gradient([<orientation>, ]<color>, ...)
    • orientation：預設以垂直方向呈現，設定特定角度可改變方向，如 45deg
    • color：可設中斷點，多加一組 px 單位或百分比的數值即可，如 #CCC 20%
  • radial-gradient(<color>, ...)
  • (tool)

多重背景

  • 以 , 分隔多組設定即可

Selector

  • :first-child：第一個元件
  • :last-child：最後一個元件
  • :only-child：自己是唯一子元件的元件
  • :target：目前 URL 的 hash 指向的元件
  • :checked：目前勾選的 checkbox
  • :nth-child(x)
    • x = 1：即 :first-child
    • x = 2n 或 x = even：即偶數項元件
    • x = 2n+1 或 x = odd：即奇數項元件
    • x = 3n：即 3 的倍數項元件
    • nth-last-child(x)：反向操作，從底部算回來
  • direct descendant：>
  • negation：:not(<selector>)

轉換

  • transition: <duration> <CSS property>[ <time-function>][ <delay>]
    • duration：單位為 s 或 ms
    • time-function：linear、ease-in、ease-out、ease-in-out，或用 cubic-bezier() (tool)
    • 可設定多組，以 , 分隔

Box Sizing

  • box-sizing: border-box | content-box
    • context-box：預設值，先算出 block 寬度再加上 margin、padding 及 border
    • border-box：反之

變形

  • trasform: <transform-function>
    • rotate(x)：以參考點為中心軸 2D 旋轉 x 度
    • skewX(x)：以參考點為中心軸沿著橫向傾斜 x 度
    • skewY(x)：以參考點為中心軸沿著縱向傾斜 x 度
    • skew(x,y)：以參考點為中心軸沿著橫向傾斜 z 度、縱向傾斜 y 度
    • scaleX(x)：由參考點橫向縮放 x 倍
    • scaleY(x)：由參考點縱向縮放 x 倍
    • scale(x,y)：由參考點 2D 橫向縮放 x 倍、縱向縮放 y 倍
    • translateX(x)：由參考點橫向移動 x 距離
    • translateY(x)：由參考點縱向移動 x 距離
    • translate(x,y)：由參考點 2D 橫向移動 x 距離、縱向移動 y 距離
    • matrix(a,b,c,d,e,f)：transformation matrix (tool)
    • 角度單位：deg、rad、grad
    • 可設定多組，以空白分隔

Flexible Box Model

  • display: box; 可使子元件水平排列（如傳統使用 float 效果），子元件預設會延展成父元件大小，若要控制子元件大小需設定其 box-flex
  • box-flex: 0; 元件不會延展，設為 1 或大於 1 則會延展至填滿可用空間為止（亦可藉此設定比例）

字型

1
2
3
4
@font-face {
	font-family: myFont;
	src: url('font.ttf');
}
Web Development
CSS