css3常用屬性收集

RGBA

background：rgba(0, 118, 160, .25);

前三個值是RGB顏色值，最後一個值是水平的透明度（0 =透明，1 =不透明）。

RBGA可應用於任何與顏色相關的屬性如字型顏色，邊框顏色，背景顏色，陰影的顏色，等

文本陰影 text-shadow（不需要判斷瀏覽器）

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

文字陰影的結構是按照以下順序：X -位移，Y -位移，模糊，和顏色;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

設定為負值，X -位移陰影轉移到左側。設定為負值位移Y -轉移陰影頂端。顏色可以用RGBA值。

text-shadow:0px 1px 0px #fff,0px -1px 0px #000；

文字陰影的列表（以逗號分隔）,1px的頂部和底部1px的陰影。

盒陰影 box-shadow（需要判斷瀏覽器）

盒陰影的結構和文字陰影的一樣：分別標示：X -位移，Y位移，模糊和顏色 。

-webkit-box-shadow:5px 5px 7px #333;

-moz-box-shadow:5px 5px 7ix #333;

同樣，可以定義多個陰影樣式，用逗號隔開。

moz-box-shadow:

-2px -2px 0 #fff,

2px 2px 0 #bb9595,

2px 4px 15px rgba(0, 0, 0, .3);

box-shadow屬性至多有6個參數設定：

陰影類型：此參數是一個可選值，如果不設值，其預設的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內陰影，也就是說設定陰影類型為“inset”時，其投影就是內陰影；

X-offset:是指陰影水平位移量其值可以是正負值可以取正負值，如果值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊；

Y-offset:是指陰影的垂直位移量，其值也可以是正負值，如果為正值，陰影在對象的底部，反之其值為負值時，陰影在對象的頂部；

陰影模糊半徑：此參數是可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴充半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值是，則縮小

陰影顏色：此參數可選，如果不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

盒子邊界半徑 border-radius（需要判斷瀏覽器）

邊界半徑的簡寫，是類似的Padding和Margin屬性（如邊界半徑： 20像素 ）。

在瀏覽器的順序來渲染邊界半徑，在WebKit瀏覽器用“-WebKit-”，Firefox用“-moz-”。

border-radius:20px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

您可以指定一個不同的值的每個角。注意Firefox和Webkit的角有不同的屬性名稱。

“Webkit的”寫法

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:25px;

-webkit-border-right-left-radius:45px;

“Firefox”的寫法

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:25px;

-moz-border-radius-bottomright:45px;

以上就是css3常用屬性收集的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

