CSS3常用的新功能包括圓角、陰漸變、2D變換、3D旋轉(zhuǎn)、動(dòng)畫、viewpor和媒體查詢。

圓角、陰影

border-redius

對(duì)一個(gè)元素實(shí)現(xiàn)圓角效果，是通過border-redius完成的。屬性為兩種方式：

1. 一個(gè)屬性值，表示設(shè)置所有四個(gè)角的半徑為相同值；
2. 對(duì)四個(gè)角分別設(shè)置，屬性值的順序?yàn)?#xff1a;左上角、右上角、右下角和左下角。

box-shadow

box-shadow屬性值為：h-shadow v-shadow blur spread color inset。

h-shadow：水平陰影的位置，必選項(xiàng)；
v-shadow: 垂直陰影的位置，必選項(xiàng)；
blur：可選值，模糊半徑
color：可選項(xiàng)，陰影的顏色
inset：可選，默認(rèn)是外部陰影outset。

如果需要設(shè)置多重陰影的話，就添加多個(gè)屬性值。

漸變gradient

CSS的漸變就是在兩個(gè)或者多個(gè)顏色之間平穩(wěn)過度顯示。

1、線性漸變【linear-gradient】

需要設(shè)置兩個(gè)顏色和方向【或者一個(gè)角度】。語(yǔ)法如下：
background:linear-gradient(direction,color1,color2)

其中方向的值direction，可以設(shè)置角度，比如0deg、90deg或者英文，比如to top，to right，to left。

2、徑向漸變【redial-gradient】

徑向漸變就是圓形漸變或者是橢圓漸變。顏色是從起點(diǎn)向周圍延伸過渡顯示。

漸變可以指定漸變的中心點(diǎn)、漸變的形狀和大小。默認(rèn)情況下漸變中心為center。還可以設(shè)置left、top、right和bottom來表示漸變的中心位置。

漸變的形狀默認(rèn)是橢圓ellipse，圓形設(shè)置為circle

2D變換：旋轉(zhuǎn)、傾斜、縮放和位移

1、旋轉(zhuǎn)【rotate】和傾斜【skew】

旋轉(zhuǎn)函數(shù)rotate，就是元素通過一個(gè)角度相對(duì)于原點(diǎn)進(jìn)行旋轉(zhuǎn)，如果旋轉(zhuǎn)值為正數(shù)，則順時(shí)針旋轉(zhuǎn)；如果旋轉(zhuǎn)值為負(fù)數(shù)，則是逆時(shí)針選裝。

傾斜函數(shù)skew，讓一個(gè)元素傾斜。

rotate和skew都可以接受兩個(gè)參數(shù)，分別表示為x、y軸方向上的角度。

2、縮放【scale】和位移【translate】

scale函數(shù)是根據(jù)中心原點(diǎn)對(duì)元素進(jìn)行縮放；可以設(shè)置元素在X軸或者Y軸方向上進(jìn)行縮放。translate位移函數(shù)原理相同。

任何一個(gè)元素，都有一個(gè)中心點(diǎn)，也就是元素的坐標(biāo)原點(diǎn)。沒有特殊設(shè)置的情況下，元素的中心原點(diǎn)位于元素X軸和Y軸的50%處。
比如；

如果想改變?cè)氐闹行狞c(diǎn)，就通過transform-origin，它的使用語(yǔ)法如下：

transform-origin:left top，表示元素中心為左上角。

3D旋轉(zhuǎn)

backface-visibility屬性定義當(dāng)元素不面向屏幕時(shí)是否可見，其值可為visible（可見）、hidden（不可見）。如果旋轉(zhuǎn)后不希望看到其背面，該屬性很有用。

動(dòng)畫

1、transition

transition的語(yǔ)法如下：

transition:transition-property transition-duration transition-timing-function transition-delay

transition-timing-function的取值為linear、ease、ease-in、ease-out、ease-in-out和cubic-bezier。

linear：勻速過度
ease：慢——快——慢
ease-in：慢速結(jié)束過度效果
ease-in-out：慢速開始和結(jié)束過度效果。
cubic-bezier：貝塞爾曲線函數(shù)，自定義過渡效果。

2、自定義動(dòng)畫

在css3中第一一個(gè)動(dòng)畫，那么首先為建立對(duì)應(yīng)的動(dòng)畫規(guī)則，也就是關(guān)鍵幀keyframes。

keyframes用來指定動(dòng)畫名稱和動(dòng)畫規(guī)則，動(dòng)畫名稱在執(zhí)行動(dòng)畫周期的時(shí)候，作為一個(gè)標(biāo)識(shí)符來使用。

在動(dòng)畫規(guī)則里面，使用關(guān)鍵字from和to來自定義動(dòng)作。效果表現(xiàn)為從一種狀態(tài)過渡到另一種狀態(tài)。

如果要定義復(fù)雜動(dòng)畫的話，那就在form到to之間，使用相應(yīng)的百分比。比如20%、40%、60%，在不同階段執(zhí)行不同的動(dòng)畫規(guī)則。以此來實(shí)現(xiàn)完整的動(dòng)畫效果。