1. 程式人生 > >CSS3用過哪些新特性

CSS3用過哪些新特性

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

關於CSS3,可以先檢視一下文件

新特性有:

  • border-radius 圓角, @font-face 字型, box-shadow text-shadow 框文字的陰影
  • word-wrapbackground-sizebackground-originborder-imagebox-sizingcalclinear-gradient 等等
  • transform 轉換
    • 2D 轉換
      • rotate 旋轉,圖片轉個90或180度什麼的
      • translate 位置移動
      • scaleskewmatrix 等
    • 3D 轉換
      • rotate(XYZ) 根據x,y,z軸旋轉
      • translate(XYZ)scale(XYZ) 同理
      • perspective 透視,這個很多3D效果都要設定一下,不然3D還是隻會有”2D”的效果
  • transition: 過渡,簡單的動畫(如:移個位置,變個長短),直接用這個屬性就能搞定。
  • animation: 動畫,3D可以呼叫硬體渲染。
  • 新的長度單位:rem, chvwvhvmaxvmin 等。其中ch:數字“0”的寬度,vw 相對於視窗的寬度:視窗寬度是100vw.
  • clip-path: 繪製路徑,類似SVG技術。 國外炫酷產品
  • flexflex
    佈局,繼 table 和 div 後的趨勢,不瞭解或不熟悉的可以參考cssreference
  • 偽類選擇器:如::target:enabled:disabed:first-childlast-child等等
  • @media 媒體查詢,適用於一些響應式佈局中
  • columns: 分欄佈局。

具體檢視文件,或 Google 吧