css3常用新特性总结(有例子超详细)

前言

在此记录并总结下项目中常用 特性

文章有点长 大家可以看自己感兴趣的特性~~

1.边框圆角（border-radius）

语法：border-radius: n1,n2,n3,n4;

• n1-n4 四个值的顺序是：左上角，右上角，右下角，左下角。

示例

 <!--border-radius  -->
    <div class="no-border-radius">no-border-radius</div>
    <div class="border-radius">border-radius</div>
    <div class="border-radius-special">border-radius-special</div>
    <div class="border-radius-circle">border-radius-circle</div>


  .no-border-radius{
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
  }
  .border-radius{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:5px;
  }
  .border-radius-special{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 40px;
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 80px 25px 80px;
  }
  .border-radius-circle{
    margin-top:10px;
    border:2px solid #000;
    padding:10px 10px;
    background:#dddddd;
    text-align:center;
    width:100px;
    height:100px;
    border-radius:50%;
  }

效果如下：

实用拓展：当我们需要创造一些比较个性的图案的时候可以用圆角配合伪元素去实现 比如聊天气泡框 头像 组合很多想要的形状

2.过渡（transition）

语法：transition： CSS 属性，持续时间，效果曲线(默认 ease)，延迟时间(默认 0)

先来看一个不使用过度的下拉菜单

  <div class="demo-hover  demo-ul ul-transition t_c">
        <ul class="fllil">
            <li>
                <a href="javascript:;">html</a>
                <ul>
                    <li><a href="#">div</a></li>
                    <li><a href="#">h1</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">js</a>
                <ul>
                    <li><a href="#">string</a></li>
                    <li><a href="#">array</a></li>
                    <li><a href="#">object</a></li>
                    <li><a href="#">number</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">css3</a>
                <ul>
                    <li><a href="#">transition</a></li>
                    <li><a href="#">animation</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">框架</a>
                <ul>
                    <li><a href="#">vue</a></li>
                    <li><a href="#">react</a></li>
                </ul>
            </li>
        </ul>
        <div class="clear"></div>
    </div>


    .demo-hover.demo-ul.t_c {
        margin-bottom: 200px;
    }

    .demo-ul li {
        display: inline-block;
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }

    .demo-ul li a {
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .demo-ul li ul {
        padding: 0;
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0px;
        transform: scaleY(0);
        overflow: hidden;
        margin: 0;
    }
    .demo-ul li:hover ul {
        transform: scaleY(1);
    }

    .demo-ul li ul li {
        float: none;
        background: #0099ff;

    }

效果如下：

现在加上过渡效果

    .ul-transition ul {
        transform-origin: 0 0;
        transition: all .5s;
    }

实用拓展 ：合理的运用过渡效果可以使交互体验好很多 还可以自己定制效果曲线 hover 效果 下拉菜单等

3.动画（animation）

语法：animation：动画名称，一个周期花费时间，运动曲线（默认 ease），动画延迟（默认 0），播放次数（默认 1），是否反向播放动画（默认 normal），是否暂停动画（默认 running）

示例：呼吸灯效果

    <div class="screen-3_circle">
        <div class="screen-3_circle_item screen-3_circle_item_i-1">HTML5</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-2">PHP</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-3">JAVA</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-4">Python</div>
        <div class="screen-3_circle_item screen-3_circle_item_i-5">Node.js</div>
    </div>


    .screen-3_circle {
        position: absolute;
        width: 520px;
        height: 64px;
        right: 10px;
        top: 20px;
    }

    .screen-3_circle_item {
        width: 54px;
        height: 54px;
        background-color: #2b333b;
        text-align: center;
        font-size: 10px;
        line-height: 54px;
        border-radius: 50%;
        float: left;
        margin-left: 40px;
        position: relative;
    }

    .screen-3_circle_item_i-1 {
        color: #17b0ff;
    }

    .screen-3_circle_item_i-2 {
        color: #4f7df0;
    }

    .screen-3_circle_item_i-3 {
        color: #ff6060;
    }

    .screen-3_circle_item_i-4 {
        color: #25c7da;
    }

    .screen-3_circle_item_i-5 {
        color: #83bd4d;
    }

    .screen-3_circle_item:before {
        content: ' ';
        display: block;
        width: 54px;
        height: 54px;
        background-color: transparent;
        border-radius: 50%;
        position: absolute;
        left: -5px;
        top: -5px;
        animation: shine 2s infinite;
    }

    .screen-3_circle_item_i-1:before {
        border: 5px solid #1f5975;
    }

    .screen-3_circle_item_i-2:before {
        border: 5px solid #424d76;
    }

    .screen-3_circle_item_i-3:before {
        border: 5px solid #6b4146;
    }

    .screen-3_circle_item_i-4:before {
        border: 5px solid #29535f;
    }

    .screen-3_circle_item_i-5:before {
        border: 5px solid #3e4e40;
    }

    @-webkit-keyframes shine {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }
    }

效果如下：

实用拓展 ：可以基于 animate.css 动画库去实现很多常见的动效 比如 css3-loading 效果

4.阴影（box-shadow）

语法：box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置 inset 就是从外往里）

示例：

<div class="shadown"></div>
<div class="shadown-border"></div>


.shadown {
        display: inline-block;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.71);
        width: 100px;
        height: 100px;
        background: pink;
    }

    .shadown-border {
        display: inline-block;
        box-shadow: 0 0 10px 7px rgba(103, 58, 183, 0.62);
        width: 100px;
        height: 100px;
        background: pink;
        margin-left: 50px;
        border-radius: 50%;
    }

效果如下：

实用拓展 ：可运用阴影创造很多设计感十足的效果 比如阴影边框 立体感 光晕效果等等

5.背景大小（background-size）

语法：background-size: length|percentage|cover|contain

 <div class="background-cover">background-cover</div>
 <div class="background-contain">background-contain</div>


  .background-cover {
        width: 450px;
        height: 200px;
        margin: 30px auto;
        border: 1px dashed skyblue;
        text-align: center;
        background: url(./test.jpg) no-repeat;
        background-size: cover;
    }

    .background-contain {
        width: 450px;
        height: 200px;
        margin: 30px auto;
        border: 1px dashed skyblue;
        text-align: center;
        background: url(./test.jpg) no-repeat;
        background-size: contain;
        background-position: center;
    }

效果如下：

实用拓展：background-size 还可以设置具体的宽高 px 或者百分比 用来在项目里更加合适的展示背景图

6.文本溢出（text-overflow）

语法：text-overflow：clip|ellipsis|string

<div class="text-overflow">
        这是一段很长的话，如果超出容器就会以省略号的形式存在
</div>


.text-overflow {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}

效果如下：

实用拓展：一般用作于单行省略

7.渐变

语法：

• CSS3 线性渐变

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);

<point>：[ left | right ]? [ top | bottom ]? || <angle>?

<color-stop>：<color> [ <length> | <percentage> ]?

• CSS3 径向渐变

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>：[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>：circle | ellipse

<size>：closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>：<length> | <percentage>

<color-stop>：<color> [ <length> | <percentage> ]?

示例

   <!-- 直线渐变 -->
    <div class="toRight"></div>
    <!-- 径向渐变 -->
    <div class="radial-gradient"></div>


   /* 直线渐变*/
    .toRight {
        margin-top: 100px;
        width: 100%;
        height: 200px;
        background-image: -webkit-linear-gradient(to right,
                rgba(255, 0, 0, 0) 0%,
                rgba(255, 0, 0, 0.8) 7%,
                rgba(255, 0, 0, 1) 11%,
                rgba(255, 0, 0, 1) 12%,
                rgba(255, 252, 0, 1) 28%,
                rgba(1, 180, 7, 1) 45%,
                rgba(0, 234, 255, 1) 60%,
                rgba(0, 3, 144, 1) 75%,
                rgba(255, 0, 198, 1) 88%,
                rgba(255, 0, 198, 0.8) 93%,
                rgba(255, 0, 198, 0) 100%);
        background-image: linear-gradient(to right,
                rgba(255, 0, 0, 0) 0%,
                rgba(255, 0, 0, 0.8) 7%,
                rgba(255, 0, 0, 1) 11%,
                rgba(255, 0, 0, 1) 12%,
                rgba(255, 252, 0, 1) 28%,
                rgba(1, 180, 7, 1) 45%,
                rgba(0, 234, 255, 1) 60%,
                rgba(0, 3, 144, 1) 75%,
                rgba(255, 0, 198, 1) 88%,
                rgba(255, 0, 198, 0.8) 93%,
                rgba(255, 0, 198, 0) 100%);
    }

    /*径向渐变 */
    .radial-gradient {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        background-image: -wekbit-radial-gradient(red 20%, green 50%, blue 80%);
        background-image: radial-gradient(red 20%, green 50%, blue 80%);
    }

效果如下：

实用拓展：这个在实际项目可以用来做彩虹特效 同时模拟太阳光线以及地球地壳分层等

8.滤镜（Filter）

语法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

<img src='./test.jpg' class='pic-filter'>

.pic-filter {
        margin: 0 auto;
        display: block;
        width: 400px;
        filter: grayscale(100%)  blur(2px) opacity(50%);
    }

效果如下：

实用拓展：对图片置灰 背景图高斯模糊视觉优化 图片透明度调整等等

9.字体（font-face）

语法：

<style> 
    @font-face
    {
     font-family: myFirstFont;
     src: url(sansation_light.woff);
    }
    div
    {
     font-family:myFirstFont;
    }
</style>

示例

<i class="iconfont">&#xe747;</i>
<i class="iconfont ">&#xe744;</i>
<i class="iconfont">&#xe738;</i>


  /*字体图标 */
    @font-face {
        font-family: "iconfont";
        src: url('./iconfont.eot');
        src: url('./iconfont.eot') format('embedded-opentype'),
            /* IE6-IE8 */
            url('./iconfont.woff') format('woff'),
            /* chrome, firefox */
            url('./iconfont.ttf') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('./iconfont.svg') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 40px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #9c9c9c;
        margin: 0 5px;
    }

效果如下：

实用拓展：为项目配置特殊字体 引用iconfont字体图标

10.媒体查询

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
} 

示例：背景色根据屏幕尺寸变化

   @media screen and (max-width: 780px) {
        body {
            background-color: lightblue;
        }
    }

    @media screen and (min-width: 780px) and (max-width:1200px) {
        body {
            background-color: pink;
        }
    }

效果如下：

实用拓展：移动端适配的解决方案之一 可以个性化定制pc端和移动端样式