css新特性有哪些（詳細介紹css的9大新特性）

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轉換

• translated3d(x,y,z):指定元素在三維空間的位移。
• translatedX(x) ：指定元素在x軸中的位移。
• translatedY(y) ：指定元素在y軸中的位移。
• translatedZ(z) ：指定元素在z軸中的位移。
• scale3d(x,y,z)：定義 3D 縮放轉換。
• scaleX(x)：通過設置 X 軸的值來定義縮放轉換。
• scaleY(y)：通過設置 Y 軸的值來定義縮放轉換。
• scaleZ(z)：通過設置 Z 軸的值來定義縮放轉換。
• rotate3d(x,y,z,angle)：定義 3D 旋轉。
• rotateX(x)：定義沿著 X 軸的 3D 旋轉。
• rotateY(y)：定義沿著 Y 軸的 3D 旋轉。
• rotateZ(z)：定義沿著 Z 軸的 3D 旋轉。

7、過渡

transition ：設置元素要過渡的效果，總共有四個屬性，可簡寫。

• transition-property：規定應用過渡的 CSS 屬性的名稱。
• transition-duration：定義過渡效果花費的時間。默認是 0。
• transition-timing-function ：規定過渡效果的時間曲線。默認是 “ease”。
• transition-delay：規定過渡效果何時開始。默認是 0。

可簡寫為：

transition: property duration timing-function delay;

8、動畫

animate：為元素添加動畫，是一個簡寫屬性。也可以拆分設置。

• animation-name：規定動畫名稱
• animation-duration：規定一個動畫周期所花費的時長ms或s為單位。
• animation-timing-function：規定動畫的速度曲線。
• animation-fill-mode：規定動畫不播放時的元素樣式。
• animation-delay：規定動畫延遲多久執行。
• animation-iteration-count：動畫播放次數。
• animation-direction：規定動畫下一期是否逆向播放。
• animation-paly-state：動畫運行狀態。

可簡寫為：

animation: name duration timing-function delay iteration-count paly-state;

9、文本效果

word-break：定義如何換行。屬性值有normal(瀏覽器默認換行規則)、break-all(允許在單詞內換行)、keep-all(只能在半角空格或連字符處換行)。

word-wrap：允許長的內容可以自動換行。屬性值有normal，break-word。

text-overflow ：指定文本溢出包含他的元素，應該發生什么。屬性值有clip(修剪文本)、ellipsis(顯示省略號)、string(給定的字符串來代表被修剪的文本)。