css3新特性總結

1、什麼是css3

　　css用於控制網頁的樣式和佈局，css3是css的升級版本，受瀏覽器限制，跨瀏覽器開發有點複雜。css3徹底向後兼容

2、css3新特性

　　一、邊框

　　css3的邊框有以下屬性：

　　　　（1）、border-radius：圓角邊框，示例以下：

　　　　

　　　　效果以下所示：

　　　　（2）、box-shadow：邊框陰影，示例以下：

　　　　

　　　　效果以下所示：

　　　　

　　　　（3）、border-image：邊框圖片，示例以下：

　　　　

　　　　效果以下所示：

　　　　　

　　二、背景

　　　　（1）、background-size

　　　　　　css3中規定背景圖片的尺寸，能夠設置重複的背景圖片。以前是由圖片的實際尺寸決定的。

　　　　（2）、background-origin

　　　　　　規定背景圖片的定位區域，此屬性能夠將多個圖片整合成一個圖片。有利於減小HTTP請求。

　　三、文本效果

　　　　（1）、text-shadow，文本陰影，示例以下：

　　　　　　

　　　　效果以下：　　

　　　　　　

　　　　（2）、word-wrap，文本換行，示例以下：

　　　　　　

　　　　效果以下：

　　　　　　

　　四、字體

　　　　css3中使用@font-face規則定義字體，指向字體的文件，在HTML中使用font-family屬性引用字體的名稱。

　　五、2D轉換

　　　　（1）、translate（）移動，示例以下：

　　　　　

　　　　（2）、rotate（）旋轉，示例以下：

　　　　　　

　　　　（3）、scale（）元素的縮放，示例以下：

　　　　　　

　　　　（4）、skew（）元素根據x軸或者y軸進行翻轉，示例以下：

　　　　　　

　　　　（5）、matrix（）定義2D轉換，使用六個值的矩陣。

　　六、3D轉換

　　　　

　　七、過渡

　　　　transition簡寫屬性，用於在一個屬性中設置四個過渡屬性。示例以下：

　　　　

　　八、動畫

　　　　css3中可以建立動畫，能夠在許多網頁中取代動畫圖片，flash動畫以及JavaScript。

　　　　建立動畫須要學習@keyframes規則，form表示開始。to表示結束，也可使用百分比設置。示例以下：

　　　　

　　九、多列

　　　　（1）、column-count規定元素被分割的列數，示例以下：

　　　　　　

　　　　效果以下：

　　

　　　　（2）、column-gap規定列之間的間隔，示例以下：

　　　　

　　　　（3）、column-rule設置列之間的寬度、樣式和顏色規則。示例以下：

　　　　

　　十、用戶界面

　　　　（1）、resize規定是否可由用戶調整元素尺寸。

　　　　

 

　　　　（2）、box-sizing容許你以確切的方式定義適應某個區域的具體內容。

　　　　

 

　　　　（3）、outline-offset對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

　　　　

　　　　

3、總結

　　這次經歷面試後才發現本身css3方面學過的都忘記了，值此空閒時間作一些筆記加深記憶。