CSS3用過哪些新特性
阿新 • • 發佈:2019-02-04
參考: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”的效果
- 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
: 分欄佈局。
具體檢視文件,或 Google 吧