隨著主流瀏覽器不斷地更新與進(jìn)步，CSS搭配js所形成的網(wǎng)頁動(dòng)畫效果，能用CSS3的語法直接呈現(xiàn)，在圖片的網(wǎng)站設(shè)計(jì)上更能減少圖片效果，避免檔案容量過大造成存取困難。
到底有哪些CSS3語法在前臺(tái)網(wǎng)頁設(shè)計(jì)中是最常被使用的呢?
1. RGBA設(shè)定元素顏色
可設(shè)定元素的顏色，主要利用顏色的RGB值，以及設(shè)定元素的透明度。
范例：
background:rgba(0,0,0,0.5);
background:rgba(0,0,0,1);
background:rgba(red,green,blue,alpha);
其中alpha值 0為透明 1為不透明，0~1區(qū)間可選擇透明度的強(qiáng)弱。
? ? ? ??
2.Border radius設(shè)定元素圓角
可設(shè)定元素圓角，預(yù)設(shè)為0
范例：
border-radius: 10px;
-webkit-border-radius: 10px; (針對(duì)chrome瀏覽器)
-moz-border-radius: 10px; (針對(duì)firefox瀏覽器)
?
3. Text Shadow文字陰影
可設(shè)定文字陰影
范例：
text-shadow: 1px 2px 3px #000;
?
4. box Shadow區(qū)塊陰影
可設(shè)定區(qū)塊陰影
范例：
box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000; (針對(duì)chrome瀏覽器)
-moz-box-shadow: 1px 2px 3px #000; (針對(duì)firefox瀏覽器)
5. transition過渡動(dòng)畫
可設(shè)定動(dòng)畫效果
transition-property：對(duì)哪個(gè)屬性
transition-duration：動(dòng)畫時(shí)間，預(yù)設(shè)為0
transition-timing-function：動(dòng)畫效果，如淡入、淡出等
設(shè)定值：
linear:以相同速度開始至結(jié)束的效果
ease:慢速開始，然后加快，之后慢速結(jié)束的效果
ease-in：以慢速開始的效果
ease-out：以慢速結(jié)束的效果
ease-in-out：以慢速開始和結(jié)束的效果
cubic-bezier：在cubic-bezier函數(shù)中定義值，是0~1之間的數(shù)值
通常在設(shè)定動(dòng)畫速度時(shí)，大多使用ease-in或ease-out來取代，但借由cubic-bezier，可以得到更多種速度控制的動(dòng)畫效果。
transition-delay：規(guī)定動(dòng)畫效果的延遲時(shí)間
范例：
div{
width:100px;height:100px;
transition-property:width;
transition-duration:1s;}
div:hover{width:200px;}
以上會(huì)造成寬度改變的滑動(dòng)效果
6. Gradient Background設(shè)定背景漸層
上下漸層：GradientType=0
左右漸層：GradientType=1
漸層起始顏色：startcolorstr=#?
漸層結(jié)束顏色：endcolorstr=#?
范例：
預(yù)設(shè)的背景色
background: #278092;
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276)); ?(針對(duì)chrome瀏覽器)
background: -moz-linear-gradient(top, #00475E, #007276);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); ?(針對(duì)firebox瀏覽器)
background: -o-linear-gradient(top, #00475E, #007276); ?(針對(duì)opera瀏覽器)
?
?目前這些都是在網(wǎng)頁設(shè)計(jì)中最常使用的CSS3語法，一般網(wǎng)路上也有免費(fèi)的產(chǎn)生器可供使用。CSS3的出現(xiàn)影響了使用者使用網(wǎng)頁的讀取速度，在目前較流行的RWD網(wǎng)頁(響應(yīng)式網(wǎng)頁設(shè)計(jì))更有特別的用法，且較不受拘束，未來CSS3的發(fā)展指日可待。
