css新特性
1.border-radius：設置圓角邊框效果
（1）格式1
border-radius：值，四個角相同
border-radius：值1（左上、右下）值2（右上、左下）
border-radius：值1（左上） 值2（右上、左下）值3（右下）
border-radius：值1（左上） 值2（右上） 值3（右下） 值4（左下）
（2）格式2
border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角
2.text-shadow：設置文本陰影效果
（1）格式1：text-shadow：水平位移值垂直位移值陰影半徑陰影顏色
（2）格式2：text-shadow：水平位移值垂直位移值陰影半徑陰影顏色，水平位移值垂直位移值陰影半徑陰影顏色；
3.box-shadow：設置盒子陰影效果
（1）格式1：box -shadow：inset 水平位移值垂直位移值陰影半徑陰影外擴陰影顏色
（2）格式2：box -shadow：水平位移值垂直位移值陰影半徑陰影外擴陰影顏色，水平位移值垂直位移值陰影半徑陰影外擴陰影顏色；
4.border-image：用圖像作爲元素的邊框
（1）border-image-source：設置圖像地址，格式爲border-image-source：url(圖像地址路徑)
（2）border-image-slice：設置圖像的切割方式，採用九宮格的模式切割圖像，格式border-image-slice：值，注意值沒有單位
（3）border-image-width：設置圖像邊框的寬度，該寬度可以和切割方式的值相同，值的順序也是上、右、下、左
（4）border-image-outset：設置圖像邊框外擴效果，屬性值值爲像素值，順序爲上、右、下、左
（5）border-image-repeat：設置邊框中間部分的平鋪方式，值爲stretch（拉伸）、repeat（平鋪，會有不完整圖像）、round（平鋪，沒有不完整圖像）
（6）border-image屬性的使用：source slice fill/width/outset repeat
5.background-image：可以利用該屬性設置多個背景圖，格式：background-image：url()，url();，注意如果要調節多個背景圖的顯示效果可以有兩種寫法
（1）方法1：分別對背景圖做修飾，使用background-repeat、background-position
（2）方法2：background：圖一的顯示方式，圖二的顯示方式；
6.background-size：調節背景圖的尺寸，屬性值爲像素值、百分比、contain、cover，注意事項：在使用像素值或百分比時，如果只寫一個值，那麼圖像在等比例縮放，此時的這個值代表的是寬度。contain的作用是使背景放大，當背景的某一條邊和容器的邊框重合則停止放大，可能會出現容器鋪不滿的現象。cover的作用是將背景圖放大，當容器被全部鋪滿時停止放大，此時會出現背景圖溢出現象
7.background-origin：設置背景圖的起始位置，屬性值爲
（1）padding-box：默認，從padding下方開始顯示背景圖
（2）border-box：從邊框下方開始顯示背景圖
（3）content-box：從內容下方開始顯示背景圖
8.background-clip：設置背景圖的剪切方式，屬性值爲
（1）padding-box：保留從padding到內容的背景圖，之外的背景圖裁切掉
（2）border-box：保留從border到padding到內容的背景圖，邊框之外的背景圖裁切掉
（3）content-box：保留內容下方的背景圖，內容以外的背景圖裁切掉
9.漸變色：線性漸變、徑向漸變
（1）線性漸變：background-image：linear-gradient（to 方向，顏色1 範圍，顏色2 範圍…）；，
注意事項：:方向可以使用關鍵字：top、bottom、left、right
也可以使用角度值，格式爲background-image：linear-gradient(角度，顏色1，顏色2….)；
（2）徑向漸變：background-image：radial-gradient（at 中心點，顏色1，顏色2）；
注意事項：中心點的表示方式可以是關鍵字：left top/right top/right bottom/left bottom，默認在元素的正中央中心點的另外一種表示方式——使用像素值表示位置，格式爲background-image：radial-gradient(at水平位置垂直位置，顏色1，顏色2…)
10.opacity：設置元素的透明效果，注意事項如下
（1）opacity的屬性值爲0-1之間，如果是0，表示完全透明，如果是1表示不透明
（2）opacity的透明效果會被所有後代元素繼承
（3）如果要修飾元素的邊框，那麼只能用rgba值，無法使用opacity
11.@font-face的使用：作用是向用戶提供服務器端字體類型，格式
@font-face{
font-family：”myFont”;
src:url(“字體所在路徑”);
}
div{
font-family：”myFont”;
}
12.transform：設置元素的變形效果，包含如下變形效果，移動、縮放、旋轉、拉伸
（1）移動：需要結合translate函數
translateX：使元素沿X軸移動，格式transform：translateX（值）；注意：值如果是正數，表示向右移動，值如果是負數表示向左移動
translateY：使元素沿Y軸移動，格式transform：translateY（值）；注意：值如果是正數，表示向下移動，值如果是負數表示向上移動
translate複合屬性的使用方式，格式transform：translate（值1，值2）；注意：值1表示沿X軸移動的距離，值2表示沿Y軸移動的距離，如果只寫一個值，那麼這個值代表沿X軸移動的效果
（2）縮放：需要結合scale函數
scaleX：設置寬度的縮放，格式transform：scaleX（值），值爲數值表示倍數，如果是1，表示不縮放，如果小於1，表示縮小，如果大於1，表示放大
scaleY：設置高度的縮放，格式transform：scaleY（值），值爲數值表示倍數，如果是1，表示不縮放，如果小於1，表示縮小，如果大於1，表示放大
scale的複合形式：transform：scale(寬度的縮放，高度的縮放)，如果只寫一個值，那麼這個值代表寬度和高度同時縮放的比例
（3）旋轉：需要結合rotate函數
格式：transform：rotate（角度），如transform：rotate(45deg)，注意：如果角度值爲正數，表示元素向右旋轉，如果角度值爲負數，表示元素向左旋轉
（4）變形：需要結合skew函數
skewX：使元素沿x軸進行變形拉伸，格式：transform：skewX（角度）
skewY：使元素沿y軸進行變形拉伸，格式：transform：skewY（角度）
skew複合屬性的使用格式爲：transform：skew（沿X軸拉伸的角度，沿Y軸拉伸的角度），注意如果只寫一個值，那麼這個值表示沿X軸拉伸
（5）3D變形效果
（1）移動：translateZ（值），使元素沿着Z進行移動，如果值爲整數，表示元素向你靠近（放大），如果值爲負數，表示元素向原理你的方向移動（縮小），使用格式：transform：translateZ（值）。注意默認是沒有Z軸的，所以如果需要體驗3D效果，那麼則需要手動創建Z軸，創建的方法是給元素所在的父元素加perspective屬性，屬性值爲像素值
（2）旋轉
rotateX：沿X軸旋轉，格式：transform：rotateX（角度）
rotateY：沿Y軸旋轉，格式：transform：rotateY（角度）
（6）transform-origin：該屬性的作用是設置變形時的參考點，屬性值的表示方式可以是關鍵字、像素值、百分比，關鍵字有：top、bottom、left、right、center，格式transform-origin：水平的值垂直的值；
13.transition：設置元素的過渡效果
（1）transition-property：設置元素身上哪些CSS屬性可以有過渡效果，屬性值all、none、CSS屬性
all：表示該元素身上的所有CSS屬性都可以設置過渡效果
none：表示該元素身上的所有CSS屬性都不可以設置過渡效果
CSS屬性：表示指定那些屬性可以有過渡效果，如果有多個屬性設置過渡效果，那麼可以使用逗號將這些屬性名分隔
（2）transition-duration：設置過渡所需時間，屬性值爲秒（如5s）或毫秒（5000ms），默認爲0，表示沒有過渡過程
（3）transition-timing-function：設置速度曲線（就是過渡狀態），屬性值如下
ease：規定慢速開始，然後變快，然後慢速結束的過渡效果
linear：規定以相同速度開始至結束的過渡效果
ease-in：規定以慢速開始的過渡效果
ease-out：規定以慢速結束的過渡效果
ease-in-out：規定以慢速開始和結束的過渡效果
transition-delay：設置過渡的延遲時間，屬性值爲秒或毫秒
transition的複合使用格式：transition：property duration timing-function delay;