一文講清楚CSS3新特性

1. 新增選擇器特性

• 層次選擇器(div~p)選擇前面有div的p元素
• 偽類選擇器
  • :first-of-type 表示?組同級元素中其類型的第?個元素
  • :last-of-type 表示?組同級元素中其類型的最后?個元素
  • :only-of-type 表示沒有同類型兄弟元素的元素
  • :only-child 表示沒有任何兄弟的元素
  • :nth-child(n) 根據元素在?組同級中的位置匹配元素
  • :nth-last-of-type(n) 匹配給定類型的元素，基于它們在?組兄弟元素中的位置，從末尾開始計數
  • :last-child 表示?組兄弟元素中的最后?個元素
  • :root 設置HTML?檔
  • :empty 指定空的元素
  • :enabled 選擇可?元素
  • :disabled 選擇被禁?元素
  • :checked 選擇選中的元素
  • :not(selector) 選擇與 不匹配的所有元素
• 屬性選擇器
• [attribute*=value]：選擇attribute屬性值包含value的所有元素
• [attribute^=value]：選擇attribute屬性開頭為value的所有元素
• [attribute$=value]：選擇attribute屬性結尾為value的所有元素

2. 新增的樣式

• border-radius,設置圓角邊框
• border-image,設置圖片邊框
• box-shadow,為元素添加陰影
• background-clip,確定背景畫區
• background-origin，設置圖片的左上角對齊方式
• background-size,設置背景圖片的大小
• background-break，設置背景分裂的方式
• word-wrap，設置單詞的換行方式，normal,整詞換行；break-word，詞內換行
• text-overflow,設置文本溢出的顯示方式，clip，截斷；ellipsis,截斷并用…代替
• text-shadow，添加文本陰影
• text-decoration,text-fill-color，設置文字內部填充顏色；text-stroke-color;設置文字邊界填充顏色；text-stroke-width,設置文字邊界寬度
• 新增rgba顏色方式，=RGB+opacity
• 新增hala顏色方式，h為色相，s為飽和度，l為亮度，a為透明底
• transition過度，transition：css屬性，花費時間，效果曲線，延遲時間；css屬性=transition-property；花費時間=transition-duration；效果曲線=transition-timing-function；延遲時間=transition-delay
• transform變化
  • translate(px,px)位移
  • scale(1,03)縮放
  • rotate（02.turn）旋轉
  • skew（30deg，20deg）傾斜
• animation動畫
  • animation-name:動畫名稱
  • animation-duration：動畫持續時間
  • animation-timing-function：動畫時間函數
  • animation-delay：動畫延遲時間
  • animation-iteration-count：動畫執行次數
  • animation-direction：動畫執行方向
  • animation-play-state:動畫播放狀態
  • animation-fill-mode：動畫填充模式
• linear-gradient線性漸變
• radial-gradient景象線變

3. 新增布局方式

• 包括flex布局，Grid布局，媒體查詢等， 看我的這幾篇文章
• https://blog.csdn.net/xiaobangkeji/article/details/144829721
• https://blog.csdn.net/xiaobangkeji/article/details/144834010
• https://blog.csdn.net/xiaobangkeji/article/details/144835580
• https://blog.csdn.net/xiaobangkeji/article/details/144852599