CSS: CSS3 新增的屬性

由於目前部份屬性在各瀏覽器內尚未統一, 故該可能會有以該瀏覽器為字首的屬性名稱, 以代表該瀏覽器的支援程度
其常用瀏覽器字首如下
-webkit- : 指 Webkit 系列的瀏覽器, 包括 Safari 或 Chrome 等
-moz- : 指 Gecko 系列的瀏覽器, 包括 Mozilla 或 Firefox 等
-o- : 指 Opera 瀏覽器
-ms- : 指 Microsoft IE 瀏覽器

== 圓角(border-radius)的屬性
屬性名稱 : -webkit-border-radius 及 -moz-border-radius
設定值為圓角的半徑值(可分別設定四個圓角的半徑, 其順序為左上, 右上, 右下, 左下)
利用區塊長, 寬及圓角等屬性的變化, 可設定出圓, 半圓, 1/4 圓等區塊
EX:
#circle_100 {
position:absolute;
left:50px;
top:50px;
background-color: #888;
width:200px;
height:200px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

== 加陰影的屬性
區塊陰影
屬性名稱 : box-shadow, -webkit-box-shadow 及 -moz-box-shadow
設定值有四個參數, 分別為X偏量, Y偏量, 模糊半徑, 陰影顏色

文字陰影
屬性名稱 : text-shadow
設定值有四個參數, 分別為X偏量, Y偏量, 模糊半徑, 陰影顏色

以上陰影的參數值以四個參數為一組, 可同時設定多組(各組參數以,號分隔), 以達陰影層次上的效果
EX:
text-shadow:0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;


== 變形(transform)的屬性
變形的屬性為 transform, -webkit-transform(chrome 瀏覽器適用) 或 -moz-transform(firefox 瀏覽器適用)

其屬性值有下

旋轉 : rotate(15deg) 順時針旋轉15度

縮放 : scaleX(1.5)x方向放大到1.5倍, scaleY(0.5) y方向縮小0.5倍,scale(1.5, 0.5) 同時設定 x方向放大到1.5倍 y方向縮小0.5倍

傾斜 : skewX(10deg)x方向傾斜10度, skewY(10deg)y方向傾斜10度, skew(10deg, 10deg) 同時設定 x方向及y方向各傾斜10度;

== CSS3 新增顏色的函數
1.  rgba(red, green, blue, alpha) 函數於顏色中增加了透明度的設定
alpha 為透明度參數, 其值介於 0.0(完全透明) 至 1.0(完全不透明)間

2. 漸層的顏色
漸層顏色主要分為線性漸層及放射漸層等兩類, 但由於各瀏覽器對漸層顏色函數格式尚未統一, 故不同瀏覽器可能會使用不同格式的函數, 其顯示效果也有所不同
目前主要兩大瀏覽器陣營定義漸層顏色函數名稱及參數格式如下
WebKit系列瀏覽器(如 Safari 或 Chrome)
只有一個函數, 以參數來區分漸層類型
第一個參數為 linear 時表 [線性漸層] 參數如下
-webkit-gradient(linear, 開始點位置, 結束點位置, 顏色順序參數...);
EX: -webkit-gradient(linear, left top, right bottom, from(#06f), to(#fff));

第一個參數為 radial 時表 [放射漸層] 參數如下(圓形的放射)
-webkit-gradient(linear, 開始圓心點位置, 開始半徑, 結束圓心點位置, 結束半徑, 顏色順序參數...);
EX: -webkit-gradient(radial, center center, 10, center center, 90, from(red), to(#1E90FF), color-stop(70%, yellow));

點位置或圓心點位置的參數是由兩個參數值所組合而成, 第一個值代表 X-軸位置, 第二個值代表 Y-軸位置, 其值可以為數值, 百分號 或 left top center 等文字標示
顏色順序至少要包含[開始顏色]及[結束顏色]兩個參數, 也可在中間增加其顏色參數值, 其顏色參數值需使用from(), to() 或 color-stop()等函數設定
設定顏色的函數說明如下
color-stop(百分比, 顏色) : 可設定不同百分比位置的漸層顏色值, 百分比為0表開始位置的顏色, 百分比為1表結束位置的顏色 
from(顏色) 設定開始顏色 = color-stop(0, 顏色)
to(顏色) 設定結束顏色 = color-stop(1, 顏色) 

Gecko 系列瀏覽器(如Mozilla 或 Firefox)
以不同的函數定義不同的漸層類型
-moz-linear-gradient 函式為 [線性漸層], 格式為 -moz-linear-gradient(起點及方向, 各顏色變化值);
-moz-radial-gradient 函式為 [放射漸層], 格式為 -moz-radial-gradient(放射型狀, 各顏色變化值);
[起點及方向]是指起始位置和方向, 其值可為 left(表由左向右漸層), top(表由上向下漸層), left top(表由左上向右下漸層), bottom 45deg(表由下方向45度角方向漸層)
[各顏色變化值] 是顏色變化的順序值如 red, yellow 30%, blue 90%, white 一組顏色的變化, 若有加上 % 者表到達該百分比位置時的顏色
[放射型狀]是指放射漸層的型狀, 可為圓形放射(circle)或橢圓放射(ellipse)