網頁設計中常用的CSS3語法

隨著主流瀏覽器不斷地更新與進步，CSS搭配js所形成的網頁動畫效果，能用CSS3的語法直接呈現，在圖片的網站設計上更能減少圖片效果，避免檔案容量過大造成存取困難。

到底有哪些CSS3語法在前臺網頁設計中是最常被使用的呢?

1. RGBA設定元素顏色

可設定元素的顏色，主要利用顏色的RGB值，以及設定元素的透明度。

范例：

background:rgba(0,0,0,0.5);

background:rgba(0,0,0,1);

background:rgba(red,green,blue,alpha);

其中alpha值 0為透明 1為不透明，0~1區間可選擇透明度的強弱。

2.Border radius設定元素圓角

可設定元素圓角，預設為0

范例：

border-radius: 10px;

-webkit-border-radius: 10px; (針對chrome瀏覽器)

-moz-border-radius: 10px; (針對firefox瀏覽器)

3. Text Shadow文字陰影

可設定文字陰影

范例：

text-shadow: 1px 2px 3px #000;

4. box Shadow區塊陰影

可設定區塊陰影

范例：

box-shadow: 1px 2px 3px #000;

-webkit-box-shadow: 1px 2px 3px #000; (針對chrome瀏覽器)

-moz-box-shadow: 1px 2px 3px #000; (針對firefox瀏覽器)

5. transition過渡動畫

可設定動畫效果

transition-property：對哪個屬性

transition-duration：動畫時間，預設為0

transition-timing-function：動畫效果，如淡入、淡出等

設定值：

linear:以相同速度開始至結束的效果

ease:慢速開始，然后加快，之后慢速結束的效果

ease-in：以慢速開始的效果

ease-out：以慢速結束的效果

ease-in-out：以慢速開始和結束的效果

cubic-bezier：在cubic-bezier函數中定義值，是0~1之間的數值

通常在設定動畫速度時，大多使用ease-in或ease-out來取代，但借由cubic-bezier，可以得到更多種速度控制的動畫效果。

transition-delay：規定動畫效果的延遲時間

范例：

div{

width:100px;height:100px;

transition-property:width;

transition-duration:1s;}

div:hover{width:200px;}

以上會造成寬度改變的滑動效果

6. Gradient Background設定背景漸層

上下漸層：GradientType=0

左右漸層：GradientType=1

漸層起始顏色：startcolorstr=#

漸層結束顏色：endcolorstr=#

范例：

預設的背景色

background: #278092;

background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276)); (針對chrome瀏覽器)

background: -moz-linear-gradient(top, #00475E, #007276);

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); (針對firebox瀏覽器)

background: -o-linear-gradient(top, #00475E, #007276); (針對opera瀏覽器)

目前這些都是在網頁設計中最常使用的CSS3語法，一般網路上也有免費的產生器可供使用。CSS3的出現影響了使用者使用網頁的讀取速度，在目前較流行的RWD網頁(網站建設、響應式網站設計" href="http://m.kartarina.com/h5.html" target="_blank">響應式網頁設計)更有特別的用法，且較不受拘束，未來CSS3的發展指日可待。

分享題目：網頁設計中常用的CSS3語法
網站鏈接：http://m.kartarina.com/news/79090.html

成都網站建設公司_創新互聯，為您提供移動網站建設、定制網站、網站改版、網站設計、網站維護、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯