Panda's blog

CSS 3 box-shadow, border-radius, text-shadow 應用，比起之前方式實在便利許多，在此提供三種樣式供大家參考，目前最新版之Firefox, Chrome, Safari, Opera 皆支援CSS3，至於IE就...

實際顯示：

原始碼：

.A1 {
width:150px;
height:50px;
background : #FFF;
border:1px grey solid;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px #666;
-webkit-box-shadow: 5px 5px #666;
box-shadow: 5px 5px #666;
padding:10px;
} 


.A2{
width:150px;
height:50px;
background : #E1E1E1;
border : 5px solid #ccc;
-webkit-box-shadow : 0px 6px 7px #999;
-moz-box-shadow : 0px 6px 7px #999;
box-shadow : 0px 6px 7px #999; 
padding:10px;
color:#FFF;
font-weight:700;
text-shadow: 0px 2px #333;
}


.A3{
width:150px;
height:50px;
background : #e1e1e1;
-webkit-box-shadow : inset 0px -5px 10px #333, inset 0px 10px 10px #FFF;
-moz-box-shadow : inset 0px -5px 10px #333, inset 0px 10px 10px #FFF;
-o-box-shadow : inset 0px -5px 10px #333, inset 0px 10px 10px #FFF;
box-shadow : inset 0px -5px 10px #333, inset 0px 10px 10px #FFF;
-webkit-border-radius : 10px;
-moz-border-radius : 10px;
border-radius : 10px; 
padding : 10px;
color:#FFF;
font-weight:700;
text-shadow: 0 1px 5px #000;
}

若要IE6, IE7, IE8可以顯示CSS3 box-shadow, border-radius，需先下載ie-css3.htc此檔案，並在CSS{}中加入下列藍色這段，但此方式不支援text-shadow，所以也不適用於本篇上述之原始碼。

behavior: url(ie-css3.htc);

ie-css3.htc 下載：http://fetchak.com/ie-css3/ie-css3.htc

ie-css3.htc 出處：http://fetchak.com/ie-css3/

另一個讓IE支援的檔案，此檔案除了box-shadow, border-radius，還多了漸層linear-gradient，此網站還提供CSS3預覽。

-pie-background: linear-gradient(#FFF, #000);

behavior: url(PIE.htc);

CSS3 PIE 下載：http://css3pie.com/download-latest

CSS3 PIE 出處：http://css3pie.com/