詳細介紹css的9大新特性「css新特性有哪些」

1、透明度

rgba和opacity都可以設置透明的。

rgba(red, green, blue, alpha)：alpha是0-1透明度，0時顏色為完全透明，1是完全不透明。

opacity:index：index是0-1，設置整個元素的透明度。

兩者區別：rgba是設置元素的字體或背景顏色加了透明度，其他樣式不受影響，opacity是影響整個元素包含其子元素都會設置透明度。

2、圓角

border-radius：為元素添加圓角邊框，border-radius可以簡寫也可以分別設置。與margin設置類似，可以設置一個值(表示四個圓角)、兩個值(第一個是左上角右下角，第二個值是右上角左下角)、三個值（第一個值是左上角，第二個值是右上角和左下角，第三個值是右下角）。

border-radius: 10px;
/* 等價於 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

3、背景圖片

新增背景圖片設置可以簡寫，也可以分開單獨設置。新增屬性及意義：

background-image /*設置背景圖路徑(相對和絕對路徑)*/
background-repeat /*背景圖是否重複，repeat-x水平方向重複；repeat-y垂直方向重複；no-repeat不重複；默認情況下兩個方向都重複*/
background-position
/*背景圖對齊方式，默認是左上角;(100% 0)right top設置到右上角；(100% 100%)right
bottom設置到右下角；(0 100%)left bottom設置到左下角；0 0（left top）設置到左上角；center center
水平和垂直方向都居中 */
background-attachment /*背景圖是固定還是滾動。fixed固定背景圖；scroll跟隨頁面滾動*/
background-size 背景圖片的尺寸。
backgroun-origin 規定background-position屬性相對於什麼位置來定位。
background-clip 規定背景的繪製區域。

4、陰影

box-shadow：給元素添加陰影。

語法：box-shadow:水平偏移垂直偏移 [ 模糊半徑陰影尺寸陰影顏色 inset(內部陰影) ]

text-shadow：給文字加陰影。

語法：text-shadow:水平偏移垂直偏移 [ 模糊半徑陰影尺寸陰影顏色 inset(內部陰影) ]

5、漸變

漸變有兩種：線性漸變和徑向漸變。

線性漸變：從某個方向或角度開始定義漸變

線性漸變語法(使用方向)：background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction不設置的時候默認從上到下，可以設置的方向屬性值有to bottom、to top、to right、to left、to bottom right。

線性漸變語法(使用角度)：background-image: linear-gradient(angle, color-stop1, color-stop2, …);

angle角度設置時數字加deg。

徑向漸變：從中心開始定義漸變

徑向漸變語法：background-image: radial-gradient(shape size at position, start-color, …, last-color);

6、轉換

css3的轉換可以對元素進行伸縮、縮放、旋轉、移動等。轉換可分為2D轉換和3D轉換。

2D轉換有scale(縮放)、rotate(旋轉)、translate(移動)、skew(沿x或y軸旋轉)、matrix簡寫各種2D轉換。

translate(x,y)：指定元素在二維空間中的位移。X軸方向向右，Y軸方向向下。
translateX(n)：指定元素在X軸中的位移。
translateY(n)：指定元素在Y軸中的位移。
scaleX(n)：定義 X 軸方向的縮放轉換。
scaleY(n)：定義 Y 軸方向的縮放轉換
skew(x-angle,y-angle)：定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)：定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)：定義沿着 Y 軸的 2D 傾斜轉換。

matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

實例: 利用matrix()方法旋轉div元素30°
transform : matrix( 0.866 , 0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
3D轉換

3D轉換