CSS3用過哪些新特性

參考：http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html

關于CSS3，可以先檢視一下文檔

新特性有：

• border-radius

   圓角, 

  @font-face

   字型, 

  box-shadow

  text-shadow

   框和文本的陰影

• word-wrap

  , 

  background-size

  , 

  background-origin

  , 

  border-image

  , 

  box-sizing

  , 

  calc

  , 

  linear-gradient

   等等

• transform

   轉換
  • 2D 轉換

    • rotate

       旋轉，圖檔轉個90或180度什麼的

    • translate

       位置移動

    • scale

      , 

      skew

      , 

      matrix

       等
  • 3D 轉換

    • rotate(XYZ)

       根據x,y,z軸旋轉

    • translate(XYZ)

      , 

      scale(XYZ)

       同理

    • perspective

       透視，這個很多3D效果都要設定一下，不然3D還是隻會有”2D”的效果

• transition

  : 過渡，簡單的動畫（如：移個位置，變個長短），直接用這個屬性就能搞定。

• animation

  : 動畫，3D可以調用硬體渲染。
• 新的長度機關：

  rem

  ， 

  ch

  ，

  vw

  ，

  vh

  ，

  vmax

  ，

  vmin

   等。其中ch:數字“0”的寬度,vw 相對于視窗的寬度：視窗寬度是100vw.

• clip-path

  : 繪制路徑，類似

  SVG

  技術。 國外炫酷産品。

• flex

  : 

  flex

  布局，繼 

  table

   和 

  div

   後的趨勢，不了解或不熟悉的可以參考cssreference。
• 僞類選擇器：如:

  :target

  , 

  :enabled

  , 

  :disabed

  , 

  :first-child

  , 

  last-child

  等等

• @media

   媒體查詢，适用于一些響應式布局中

• columns

  : 分欄布局。

• will-change

  : 改善渲染性能, 參考使用CSS3 will-change提高頁面滾動、動畫等渲染性能。

具體檢視文檔，或 Google 吧