css3应用实例

1 ：把按钮或者div的边框设置成圆角边框：

css为：

    text-align:center;

    border:2px solid #a1a1a1;

    padding:10px 40px; 

    background:#dddddd;

    width:350px;

    border-radius:25px;

    -moz-border-radius:25px; 老的 Firefox

实例：

设置网页中所有div的边框为圆角边框：

div{

   text-align:center;

    border:2px solid #a1a1a1;

    padding:10px 40px; 

    background:#dddddd;

    width:350px;

    border-radius:25px;

    -moz-border-radius:25px; 老的 Firefox

}

 

图例：

 

2：使用 css给div边框添加阴影

css为：

div{

width: 300px;

height: 100px;

background-color: #ff9900;

-moz-box-shadow:10px 10px 5px #888888;老版Firefox

box-shadow: 10px 10px 5px #888888;

 

}

图例：

 

3：文字阴影部分效果

 

css为：

h1

{

text-shadow: 5px 5px 5px #ffffff;

}

 

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

font-weight:bold;

}

图例：

 

 

5：css3 div 拉伸：

 css 为：

#divset{

margin:30px;

width:200px;

height:100px;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

background-color:yellow;

/* Rotate div */

transform:rotate(9deg);

-ms-transform:rotate(9deg); /* Internet Explorer */

-moz-transform:rotate(9deg); /* Firefox */

-webkit-transform:rotate(9deg); /* Safari 和 Chrome */

-o-transform:rotate(9deg); /* Opera */

}

 

#divset:hover{

width:300px;

}

 

图例：

 

6：css3实现图形上下翻转

 

css为：

#divshow{

width:100px;

    height:100px;

background:yellow;

transition:width 2s, height 2s;

-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */

-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */

-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */

}

#divshow:hover{    /*当鼠标放上去时上下翻转*/

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

 

图例：