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

實際顯示:

CSS 3 box-shadow, border-radius, text-shadow 應用

 

原始碼:

.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/

    全站熱搜

    jon6773 發表在 痞客邦 留言(0) 人氣()