css3常用屬性收集

RGBA

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

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

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

 

 

文本陰影texttext-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,

2px 4px。屬性至多有6個參數設定：

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

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

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

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

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

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

 

 

 

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

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

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

-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-top-right-radius:15px;

-webkit-border-bot-left-dius 25px;

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

「火狐」的寫法

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

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

-moz-border-5px;

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

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

 以上是css3常用屬性收集的內容，更多相關網內容請關注PHPphp .cn）！