CSS3核心知识

对 CSS3 核心知识进行概要性总结，包括CSS3选择器、CSS3边框、CSS3背景、CSS3文本、CSS3颜色特性、CSS3盒模型、CSS3变形、CSS3渐变等知识，非常的详细。

CSS3知识汇总

• CSS3选择器
  • 伪类选择器
    • 目标伪类选择器
      • E:target
    • 语言伪类选择器
      • E:lang
    • 结构伪类选择器
      • E:nth-child(n)
      • E:nth-last-child(n)
      • 通用子元素过滤器
      • E:nth-of-type(n)
      • E:nth-last-of-type(n)
      • 通用子类型元素过滤器
      • E:first-child
      • E:last-child
      • E:first-of-type
      • E:last-of-type
      • 特定位置的子元素
      • E:root
      • E:empty
      • E:only-child
      • E:only-of-type
      • 特定状态的元素
  • 伪元素
    • E:first-line
    • E:first-letter
    • E::selection
    • E::before
    • E::after
  • 属性选择器
    • E[attr]
    • E[attr="value"]
    • E[attr~="value"]
    • E[attr^="value"]
    • E[attr$="value"]
    • E[attr*="value"]
    • E[attr|="value"]
• CSS3边框
  • border-radius
  • border-image
  • border-colors
• CSS3背景
  • background-size
  • background-image
  • background-origin
  • background-clip
  • 多背景 + 多尺寸
  • -webkit-mask
• CSS3文本
  • text-shadow
  • text-overflow
  • word-wrap
  • word-break
  • white-space
• CSS3颜色特性
  • opacity
  • CSS3颜色模式
    • RGBA
    • HSL
    • HSLA
• CSS3盒模型
  • display:box
  • box-sizing
  • overflow-x/overflow-y
  • resize
  • outline
  • box-flex
  • box-orient
  • box-direction
  • box-lines
  • box-pack
  • box-align
  • box-ordinal-group
• CSS3伸缩布局盒模型
  • flex-direction
  • flex-wrap
  • flex-flow
  • flex-pack
  • flex-align
  • flex-order
  • justify-content
  • align-items/align-self
• CSS3多列布局
  • column-width
  • column-count
  • column-gap
  • column-rule
  • column-span
• CSS3渐变
  • 线性渐变
    • linear-gradient
    • repeating-linear-gradient
  • 径向渐变
    • radial-gradient
  • 重复线性/径向渐变
• CSS3变形
  • transform
  • 相关函数
    • rotate()
    • skew()
    • scale()
    • translate()
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility
  • 2D和3D变形
• CSS3过渡
  • transition
  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function
• CSS3动画
  • @keyframe
  • animation-name
  • animation-duration
  • animation-delay
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-fill-mode
• 媒体特性与Responsive
  • Media Type
  • Media Query
  • Responsive 布局
  • meta 标签
• 嵌入Web字体
  • @font-face
  • 自定义字体
  • 将图标转换成Web字体