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-”，火狐用“-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;

「火狐」的寫法

-moz-border-radius-topleft:5px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:45px;

以上是css3中的常用屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！