almost 5 years ago

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:linearease-inease-outease-in-out,或用 cubic-bezier() (tool)
    • 可設定多組,以 , 分隔

Box Sizing

  • box-sizing: border-box | content-box
    • context-box:預設值,先算出 block 寬度再加上 marginpaddingborder
    • 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)
    • 角度單位:degradgrad
    • 可設定多組,以空白分隔

Flexible Box Model

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

字型

@font-face {
    font-family: myFont;
    src: url('font.ttf');
}
← JavaScript Patterns 閱讀筆記 (8) DOM and Browser Patterns CSS3 帥啊老皮 →
 
comments powered by Disqus