码迷,mamicode.com
首页 > Web开发 > 详细

CSS3有哪些新特性

时间:2018-07-19 13:33:29      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:padding   web   color   width   htm   func   而且   opp   count   

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

 

效果显示   

CSS3有哪些新特性

标签:padding   web   color   width   htm   func   而且   opp   count   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!