css3主要新內容總結_css3

1，邊框 屬性：border-radius|border-shadow|border-image

2，背景 屬性：border-size(規定背景圖片的尺寸)|background-origin（規定背景圖片的定位地區）

3，文字效果：text-shadow|word-wrap

4，字型：自訂字型

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

}

5，2D轉換方法：transform:屬性：

 translate()，通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標）和 top（y 座標）位置參數：

rotate()，通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。

scale()，通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：

skew()，通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：

martrix()，matrix() 方法把所有 2D 轉換方法組合在一起。

matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。

 

6，3D轉換方法：
rotateX() 方法，通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
rotateY() 旋轉

通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。

 

7，過渡：transition（）方法，如：transition:all 1s ease in out;

8，動畫

animation:myfirst 5s ;

@keyframes myfirst

{

0%  {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

9,多列：

column-count 屬性規定元素應該被分隔的列數

column-gap 屬性規定列之間的間隔

column-rule 屬性設定列之間的寬度、樣式和色彩規則

10,使用者介面：

resize 屬性規定是否可由使用者調整元素尺寸，如：resize:both;

box-sizing 屬性允許您以確切的方式定義適應某個地區的具體內容。

outline-offset 屬性對輪廓進行位移，並在超出邊框邊緣的位置繪製輪廓

規定邊框邊緣之外 15 像素處的輪廓：

div

{

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}