CSS3有哪些新特性

在项目开发中我们采用的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));

这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#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.  

    }

14.  

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>

效果显示

原文地址：https://www.cnblogs.com/sunshinezjb/p/9335028.html