在項目開發中我們采用的CSS3新特性有

1.CSS3的選擇器

1）E:last-child 匹配父元素的最後一個子元素E。
2）E:nth-child(n)匹配父元素的第n個子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。

2. @Font-face 特性

Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

1. @font-face {
2. font-family: BorderWeb;
3. src:url(BORDERW0.eot);
4. }
5. @font-face {
6. font-family: Runic;
7. src:url(RUNICMT0.eot);
8. }
9. .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
10. .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

1. @font-face {
2. font-family: iconfont;
3. src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
4. }

3. 圓角

border-radius: 15px;

4. 多列布局 （multi-column layout）

1. <div class="mul-col">
2. <div>
3. <h3>新手上路</h3>
4. <p>新手專區 消費警示 交易安全 24小時在線幫助 免費開店</p>
5. </div>
6. <div>
7. <h3>付款方式</h3>
8. <p>快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款</p>
9. </div>
10. <div>
11. <h3>淘寶特色</h3>
12. <p>手機淘寶 旺信 大眾評審 B格指南</p>
13. </div>
14. </div>

1. .mul-col{
2. column-count: 3;
3. column-gap: 5px;
4. column-rule: 1px solid gray;
5. border-radius: 5px;
6. border:1px solid gray;
7. padding: 10px ;
8. }

兼容性不好，還不夠成熟。還不能用在實際項目中。

5.陰影（Shadow）

1. .class1{
2. text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
3. }

OPPO官網的陰影特效 http://www.oppo.com/cn/products.html

6.CSS3 的漸變效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

7.css彈性盒子模型

1. <div class="boxcontainer">
2. <div class="item">1</div>
3. <div class="item">2</div>
4. <div class="item">3</div>
5. <div class="item">4</div>
6. </div>
7. .boxcontainer {
8. width: 1000px;
9. display: -webkit-box;
10. display: -moz-box;
11. -webkit-box-orient: horizontal;
12. -moz-box-orient: horizontal;
13. }
15. .item {
16. background: #357c96;
17. font-weight: bold;
18. margin: 2px;
19. padding: 20px;
20. color: #fff;
21. font-family: Arial, sans-serif;
22. }

效果圖

8. CSS3制作特效

1) Transition 對象變換時的過渡效果

• transition-property 對象參與過渡的屬性
• transition-duration 過渡的持續時間
• transition-timing-function 過渡的類型
• transition-delay 延遲過渡的時間

縮寫方式：　　

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：

1. transition-property:border-color, background-color, color;
2. transition-duration:.5s, .5s, .5s;
3. transition-timing-function:ease-in, ease-in, ease-in;
4. transition-delay:.1s, .1s, .1s;

　　示例代碼

1. <style type="text/css">
2. .main{
3. position: relative;
4. margin: 0 auto;
5. height:45px;
6. width: 300px;
7. background-color:lightgray;
8. transition:background-color .6s ease-in 0s;
9. }
10. .main:hover{
11. background-color: dimgray;
12. }
13. </style>
14. <div class="main"></div>

效果顯示

CSS3有哪些新特性