我的總結（css3新特性）

時間 2019-11-05

標籤我的總結 css3 css 特性欄目 CSS 简体版

原文原文鏈接

1.前言

css3這個相信你們不陌生了，是個很是有趣，神奇的東西！有了css3，js均可以少寫不少！我以前也寫過關於css3的文章，也封裝過css3的一些小動畫。我的以爲css3不難，可是很難用得好，用得順手，最近我也在過一遍css3的一些新特性（不是所有，是我在工做上經常使用的，或者以爲有用的），以及一些實例，就寫了這一篇總結！但願，這篇文章能幫到你們認識css3。寫這篇文章主要是讓你們能瞭解css3的一些新特性，以及基礎的用法，感受css3的魅力！若是想要用好css3，這個得靠你們繼續努力學習，尋找一些講得更深刻的文章或者書籍了！若是你們有什麼其餘特性推薦的，歡迎補充！你們一塊兒學習，進步！javascript

看這篇文章，代碼能夠不用看得過於仔細！這裏主要是想讓你們瞭解css3的新特性！代碼也是很基礎的用法。我給出代碼主要是讓你們在瀏覽器運行一下，讓你們參考和調試。不要只看代碼，只看代碼的話，不會知道哪一個代碼有什麼做用的，建議邊看效果邊看代碼。

2.過渡

過渡，是我在項目裏面用得最多的一個特性了！也相信是不少人用得最多的一個例子！我日常使用就是想讓一些交互效果（主要是hover動畫），變得生動一些，不會顯得那麼生硬！好了，下面進入正文！css

引用菜鳥教程的說法：CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。要實現這一點，必須規定兩項內容：指定要添加效果的CSS屬性指定效果的持續時間。html

2-1語法

transition： CSS屬性，花費時間，效果曲線(默認ease)，延遲時間(默認0)

栗子1vue

/*寬度從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒，0.2秒後執行過渡*/
transition：width,.5s,ease,.2s

栗子2html5

/*全部屬性從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒*/
transition：all,.5s

上面栗子是簡寫模式，也能夠分開寫各個屬性（這個在下面就再也不重複了）java

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

2-2實例-hover效果

上面兩個按鈕，第一個使用了過渡，第二個沒有使用過渡，你們能夠看到當中的區別，用了過渡以後是否是沒有那麼生硬，有一個變化的過程，顯得比較生動。
固然這只是一個最簡單的過渡栗子，兩個按鈕的樣式代碼，惟一的區別就是，第一個按鈕加了過渡代碼transition: all .5s;react

2-3實例-下拉菜單

上面兩個菜單，第一個沒有使用過渡，第二個使用過渡，你們明顯看到區別，使用了過渡看起來也是比較舒服！代碼區別就是有過渡的ul的上級元素(祖先元素)有一個類名（ul-transition）。利用這個類名，設置ul的過渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}css3

可能你們不知道我在說什麼！我貼下代碼吧web

htmlsegmentfault

<div class="demo-hover demo-ul 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>
<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>

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        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{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}

上面兩個能夠說是過渡很基礎的用法，過渡用法靈活，功能也強大，結合js，能夠很輕鬆實現各類效果（焦點圖，手風琴）等，以及不少意想不到的效果。這個靠你們要去挖掘！

3.動畫

動畫這個日常用的也不少，主要是作一個預設的動畫。和一些頁面交互的動畫效果，結果和過渡應該同樣，讓頁面不會那麼生硬！

3-1.語法

animation：動畫名稱，一個週期花費時間，運動曲線（默認ease），動畫延遲（默認0），播放次數（默認1），是否反向播放動畫（默認normal），是否暫停動畫（默認running）

栗子1

/*執行一次logo2-line動畫，運動時間2秒，運動曲線爲 linear*/
animation: logo2-line 2s linear;

栗子2

/*2秒後開始執行一次logo2-line動畫，運動時間2秒，運動曲線爲 linear*/
animation: logo2-line 2s linear 2s;

栗子3

/*無限執行logo2-line動畫，每次運動時間2秒，運動曲線爲 linear，而且執行反向動畫*/
animation: logo2-line 2s linear alternate infinite;

還有一個重要屬性

animation-fill-mode : none | forwards | backwards | both;
/*none：不改變默認行爲。    
forwards ：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。    
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。 
both：向前和向後填充模式都被應用。  */

3-2.logo展現動畫

這個是我用公司logo寫的動畫，沒那麼精細

代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
    width: 600px;
    margin: 100px auto;
    font-size: 0;
    position: relative;
}
.logo-box div{
    display: inline-block;
}
.logo-box .logo-text{
    margin-left: 10px;
}
.logo-box .logo1{
    animation: logo1 1s ease-in 2s;
    animation-fill-mode:backwards;
}
.logo-box .logo-text{
    animation: logoText 1s ease-in 3s;
    animation-fill-mode:backwards;
}
.logo-box .logo2{
    position: absolute;
    top: 20px;
    left: 20px;
    animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
    animation: logo2-line 2s linear;
}
@keyframes logo1 {
    0%{
        transform:rotate(180deg);
        opacity: 0;
    }
    100%{
        transform:rotate(0deg);
        opacity: 1;
    }
}
@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
}
@keyframes logo2-line {
    0% { transform: translateX(200px)}
    25% { transform: translateX(150px)}
    50% { transform: translateX(100px)}
    75% { transform: translateX(50px)}
    100% { transform: translateX(0); }
}

@keyframes logo2-middle {
    0% { transform: translateY(0);     }
    25% { transform: translateY(-100px);     }
    50% { transform: translateY(0);     }
    75% { transform: translateY(-50px);     }
    100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>

<div class="wraper"><div class="item"></div></div>

</body>
</html>

下面讓你們看一個專業級別的

代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body {
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        overflow: hidden;
        background: #fff;
    }

    .center {
        margin: 80px auto;
    }

    .so {
        display: block;
        width: 500px;
        height: 156px;
        background: #ffffff;
    }
    .so .inner {
        width: 500px;
        height: 156px;
        position: absolute;
    }
    .so .inner * {
        position: absolute;
        animation-iteration-count: infinite;
        animation-duration: 3.5s;
    }
    .so .inner .name {
        position: absolute;
        font-size: 54px;
        left: 130px;
        top: 95px;
    }
    .so .inner .name .b {
        font-weight: bold;
    }
    .so .inner .stack-box {
        top: 100px;
        width: 115px;
        height: 56px;
    }
    .so .inner .box {
        width: 115px;
        height: 56px;
        left: 0px;
    }
    .so .inner .box div {
        background: #BCBBBB;
    }
    .so .inner .box .bottom {
        bottom: 0px;
        left: 0px;
        width: 115px;
        height: 12px;
    }
    .so .inner .box .left {
        bottom: 11px;
        left: 0px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .right {
        bottom: 11px;
        left: 103px;
        width: 12px;
        height: 34px;
    }
    .so .inner .box .top {
        top: 0px;
        left: 0px;
        width: 0;
        height: 12px;
    }
    .so .inner .stack {
        left: 22px;
        top: 22px;
    }
    .so .inner .stack .inner-item {
        background: #F48024;
        width: 71px;
        height: 12px;
    }
    .so .inner .stack .item {
        transition: transform 0.3s;
        width: 291px;
    }
    .so .inner .stack div:nth-child(1) {
        transform: rotate(0deg);
    }
    .so .inner .stack div:nth-child(2) {
        transform: rotate(12deg);
    }
    .so .inner .stack div:nth-child(3) {
        transform: rotate(24deg);
    }
    .so .inner .stack div:nth-child(4) {
        transform: rotate(36deg);
    }
    .so .inner .stack div:nth-child(5) {
        transform: rotate(48deg);
    }
    .so .inner .box {
        animation-name: box;
    }
    .so .inner .box .top {
        animation-name: box-top;
    }
    .so .inner .box .left {
        animation-name: box-left;
    }
    .so .inner .box .right {
        animation-name: box-right;
    }
    .so .inner .box .bottom {
        animation-name: box-bottom;
    }
    .so .inner .stack-box {
        animation-name: stack-box;
    }
    .so .inner .stack {
        animation-name: stack;
    }
    .so .inner .stack .inner-item {
        animation-name: stack-items;
    }
    .so .inner .stack .item:nth-child(1) {
        animation-name: stack-item-1;
    }
    .so .inner .stack .item:nth-child(2) {
        animation-name: stack-item-2;
    }
    .so .inner .stack .item:nth-child(3) {
        animation-name: stack-item-3;
    }
    .so .inner .stack .item:nth-child(4) {
        animation-name: stack-item-4;
    }
    .so .inner .stack .item:nth-child(5) {
        animation-name: stack-item-5;
    }
    @keyframes stack {
        0% {
            left: 22px;
        }
        15% {
            left: 22px;
        }
        30% {
            left: 52px;
        }
        50% {
            left: 52px;
        }
        80% {
            left: 22px;
        }
    }
    @keyframes stack-item-1 {
        0% {
            transform: rotate(12deg * 0);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 0);
        }
    }
    @keyframes stack-item-2 {
        0% {
            transform: rotate(12deg * 1);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 1);
        }
    }
    @keyframes stack-item-3 {
        0% {
            transform: rotate(12deg * 2);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 2);
        }
    }
    @keyframes stack-item-4 {
        0% {
            transform: rotate(12deg * 3);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 3);
        }
    }
    @keyframes stack-item-5 {
        0% {
            transform: rotate(12deg * 4);
        }
        10% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(0deg);
        }
        54% {
            transform: rotate(0deg);
        }
        92% {
            transform: rotate(12deg * 4);
        }
    }
    @keyframes stack-items {
        0% {
            width: 71px;
        }
        15% {
            width: 71px;
        }
        30% {
            width: 12px;
        }
        50% {
            width: 12px;
        }
        80% {
            width: 71px;
        }
    }
    @keyframes box {
        0% {
            left: 0;
        }
        15% {
            left: 0;
        }
        30% {
            left: 30px;
        }
        50% {
            left: 30px;
        }
        80% {
            left: 0;
        }
    }
    @keyframes box-top {
        0% {
            width: 0;
        }
        6% {
            width: 0;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        59% {
            width: 0;
        }
    }
    @keyframes box-bottom {
        0% {
            width: 115px;
        }
        15% {
            width: 115px;
        }
        30% {
            width: 56px;
        }
        50% {
            width: 56px;
        }
        80% {
            width: 115px;
        }
    }
    @keyframes box-right {
        15% {
            left: 103px;
        }
        30% {
            left: 44px;
        }
        50% {
            left: 44px;
        }
        80% {
            left: 103px;
        }
    }
    @keyframes stack-box {
        0% {
            transform: rotate(0deg);
        }
        30% {
            transform: rotate(0deg);
        }
        40% {
            transform: rotate(135deg);
        }
        50% {
            transform: rotate(135deg);
        }
        83% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<body>
<div class="so center">
    <div class="inner">
        <div class="stack-box">
            <div class="stack">
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
                <div class="item">
                    <div class="inner-item"></div>
                </div>
            </div>
            <div class="box">
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
                <div class="top"></div>
            </div>
        </div>
        <div class="name">
            stack<span class="b">overflow</span>
        </div>
    </div>
</div>
</body>
</html>

3-3.loading效果

這個代碼實在太多了，你們直接上網址看吧。css3-loading

3-4.音樂震動條

代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>純CSS3模擬跳動的音符效果</title>
  <style>
    *{margin:0;padding:0;list-style: none;}
    body{background-color: #efefef;}
    .demo-music {
      position: absolute;
      width: 100%;
      height: 200px;
      top: 120px;
      zoom: 1.5;
    }

    .demo-music .music {
      width: 80px;
      height: 50px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-40px, -25px);
      transform: translate(-40px, -25px);
      position: absolute;
    }

    .demo-music #waves {
      width: 80px;
      height: 50px;
      position: absolute;
      top: 12px;
      left: 12px;
    }

    .demo-music #waves li {
      position: relative;
      float: left;
      height: 100%;
      width: 12%;
      overflow: hidden;
      margin-right: 1px;
    }

    .demo-music #waves li span {
      position: absolute;
      bottom: 0;
      display: block;
      height: 100%;
      width: 100px;
      background: #09f;
    }

    .demo-music #waves .li1 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li2 span {
      animation: waves 0.9s linear 0s infinite alternate;
      -webkit-animation: waves 0.9s linear 0s infinite alternate;
    }

    .demo-music #waves .li3 span {
      animation: waves 1s linear 0s infinite alternate;
      -webkit-animation: waves 1s linear 0s infinite alternate;
    }

    .demo-music #waves .li4 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }

    .demo-music #waves .li5 span {
      animation: waves 0.7s linear 0s infinite alternate;
      -webkit-animation: waves 0.7s linear 0s infinite alternate;
    }

    .demo-music #waves .li6 span {
      animation: waves 0.8s linear 0s infinite alternate;
      -webkit-animation: waves 0.8s linear 0s infinite alternate;
    }
    @-webkit-keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }

    @keyframes waves {
      10% {
        height: 20%;
      }
      20% {
        height: 60%;
      }
      40% {
        height: 40%;
      }
      50% {
        height: 100%;
      }
      100% {
        height: 50%;
      }
    }
  </style>
</head>
<body>
  <div class="demo-music">
    <div class="music">
      <ul id="waves" class="movement">
        <li class="li1"><span class="ani-li"></span></li>
        <li class="li2"><span class="ani-li"></span></li>
        <li class="li3"><span class="ani-li"></span></li>
        <li class="li4"><span class="ani-li"></span></li>
        <li class="li5"><span class="ani-li"></span></li>
        <li class="li6"><span class="ani-li"></span></li>
      </ul>
      <div class="music-state"></div>
    </div>
    </div>
</body>
</html>

4.形狀轉換

這一部分，分2d轉換和3d轉換。有什麼好玩的，下面列舉幾個！

4-1.語法

transform:適用於2D或3D轉換的元素
transform-origin：轉換元素的位置（圍繞那個點進行轉換）。默認(x,y,z)：(50%,50%,0)

4-2.實例

transform:rotate(30deg);

transform:translate(30px,30px);

transform:scale(.8);

transform: skew(10deg,10deg);

transform:rotateX(180deg);

transform:rotateY(180deg);

transform:rotate3d(10,10,10,90deg);

5.選擇器

css3提供的選擇器可讓咱們的開發，更加方便！這個你們都要了解。下面是css3提供的選擇器。

圖片來自w3c。這一塊建議你們去w3c看（CSS 選擇器參考手冊），那裏的例子通俗易懂。我不重複講了。
提供的選擇器裏面，基本都挺好用的。可是我以爲有些不會很經常使用，好比，:root，:empty，:target，:enabled，:checked。並且幾個不推薦使用，網上的說法是性能較差[attribute*=value]，[attribute$=value]，[attribute^=value]，這個我沒用過，不太清楚。

6.陰影

之前沒有css3的時候，或者須要兼容低版本瀏覽器的時候，陰影只能用圖片實現，可是如今不須要，css3就提供了！

6-1.語法

box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始方向（默認是從裏往外，設置inset就是從外往裏）;

6-1.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:300px;
    height:100px;
    background:#09f;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

運行效果

7.邊框

7-1.邊框圖片

7-1-1.語法

border-image: 圖片url 圖像邊界向內偏移圖像邊界的寬度(默認爲邊框的寬度) 用於指定在邊框外部繪製偏移的量（默認0）鋪滿方式--重複（repeat）、拉伸（stretch）或鋪滿（round）（默認：拉伸（stretch））;

7-1-2.栗子

邊框圖片（來自菜鳥教程）

代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.demo {
    border: 15px solid transparent;
    padding: 15px;   
    border-image: url(border.png);
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-outset: 0;
}
</style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

效果

有趣變化

那個更好看，你們看着辦

7-2.邊框圓角

7-2-1.語法

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四個值的順序是：左上角，右上角，右下角，左下角。*/

7-2-2.栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 0 25px 0;
}
</style>
</head>
<body>
<div>border-radius</div>
</body>
</html>

運行結果

8.背景

這一塊主要講css3提供背景的三個屬性

background-clip

制定背景繪製（顯示）區域

默認狀況（從邊框開始繪製）

從padding開始繪製（顯示），不算border,，至關於把border那裏的背景給裁剪掉！（background-clip: padding-box;）

只在內容區繪製（顯示），不算padding和border，至關於把padding和border那裏的背景給裁剪掉！（background-clip: content-box;）

background-origin

引用菜鳥教程的說法：background-Origin屬性指定background-position屬性應該是相對位置

下面的div初始的html和css代碼都是同樣的。以下
html

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:10px dashed black;
    padding:35px;
    background:url('logo.png') no-repeat,#ccc;
    background-position:0px 0px;
}

下面看下，background-origin不一樣的三種狀況

background-size

這個相信很好理解，就是制定背景的大小
下面的div初始的html和css代碼都是同樣的。以下
html

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:1px dashed black;
    padding:35px;
    background:url('test.jpg') no-repeat;
}

多張背景圖

這個沒什麼，就是在一張圖片，使用多張背景圖片，代碼以下！
html

<p>兩張圖片的背景</p>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

css

div
{
    border:1px dashed black;
    padding:35px;
    background-size: contain;
    background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}

9.反射

這個也能夠說是倒影，用起來也挺有趣的。

9-1.語法

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩圖片

9-2.下倒影

html

<p>下倒影</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>

css

.reflect-bottom-p {
    padding-bottom: 300px;
}
        
.reflect-bottom {
    -webkit-box-reflect: below;
}

9-2.右倒影（有偏移）

html

<p>右倒影同時有偏移</p>
<p><img src="test.jpg" class="reflect-right-translate"></p>

css

.reflect-right-translate {
    -webkit-box-reflect: right 10px;
}

9-3.下倒影（漸變）

html

<p>下倒影（漸變）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>

css

reflect-bottom-mask {
    -webkit-box-reflect: below 0 linear-gradient(transparent, white);
}

9-3.下倒影（圖片遮罩）

使用的圖片

html

<p>下倒影（png圖片）</p>
<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>

css

.reflect-bottom-img {
    -webkit-box-reflect: below 0 url(shou.png);
}

10.文字

換行

語法：word-break: normal|break-all|keep-all;
栗子和運行效果

語法：word-wrap: normal|break-word;
栗子和運行效果

超出省略號這個，主要講 text-overflow這個屬性，我直接講實例的緣由是 text-overflow的三個寫法， clip|ellipsis|string。 clip這個方式處理不美觀，不優雅。 string只在火狐兼容。

超出省略號

這個其實有三行代碼，禁止換行，超出隱藏，超出省略號
html

<div>This is some long text that will not fit in the box</div>

css

div
{
    width:200px; 
    border:1px solid #000000;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

運行結果

多行超出省略號

超出省略號。這個對於你們來講，不難！可是之前若是是多行超出省略號，就只能用js模擬！如今css3提供了多行省略號的方法！遺憾就是這個暫時只支持webkit瀏覽器！

代碼以下

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
</head>
<body>

<div>這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏這裏將會超出隱藏</div>


</body>
</html>

效果圖

這樣發現邊框貼着難看，要撐開一點，可是撐開上下邊框不要使用padding!由於會出現下面這個效果。

正確姿式是這樣寫

<style> 
div
{
    width:400px;
    margin:0 auto;
    overflow : hidden;
    border:1px solid #ccc;
    text-overflow: ellipsis;
    padding:0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height:30px;
    height:60px;
}
</style>

運行結果

這樣寫，就算在不是webkit內核的瀏覽器，也能夠優雅降級（高度=行高*行數（webkit-line-clamp））！

文字陰影

語法：text-shadow:水平陰影，垂直陰影，模糊的距離，以及陰影的顏色。
栗子：text-shadow: 0 0 10px #f00;
效果

11.顏色

這個其實就是css3提供了新的顏色表示方法。

rgba

一個是rgba（rgb爲顏色值，a爲透明度）

color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);

hsla

h:色相」，「s：飽和度」，「l：亮度」，「a：透明度」
這個我姿式瞭解過，沒用過，這裏簡單給一個例子

color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);

12.漸變

css3的漸變能夠說是一大亮點，提供了線性漸變，徑向漸變，圓錐漸變（w3c和菜鳥教程都沒有說起，是我從一篇文章瞭解到，可是我本身在谷歌瀏覽器嘗試，倒是一個無效的寫法！你們若是知道怎麼用，請告知！感謝）
漸變這一部分，因爲用法靈活，功能也強大，這個寫起來很長，寫一點又感受沒什麼意思，我這裏貼幾個連接教程給你們，在文章我很少說了，畢竟我也是從那幾個地方學的，他們寫得也是比我好，比我詳細！

CSS3 Gradient
再說CSS3漸變——線性漸變
 再說CSS3漸變——徑向漸變
 神奇的 conic-gradient 圓錐漸變（這篇就是看我看到圓錐漸變的文章）

13.Filter（濾鏡）

css3的濾鏡也是一個亮點，功能強大，寫法也靈活。

栗子代碼以下

<p>原圖</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>飽和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋轉hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>對比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>陰影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter:drop-shadow(5px 5px 5px #000);"/>

14.彈性佈局

這裏說的彈性佈局，就是flex；這一塊要講的話，必需要所有講完，不講完沒什麼意思，反而會把你們搞蒙！講完也是很長，因此，這裏我也只貼教程網址。博客講的很好，很詳細！

Flex 佈局教程：語法篇
 Flex 佈局教程：實例篇

15.柵格佈局

柵格化佈局，就是grid；這一塊和flex同樣，要講就必須講完。這塊的內容和flex差很少，也有點長，這裏我也貼連接，這個連接講得也很詳細！

Grid佈局指南

16.多列布局

這一塊，我也是瞭解過，我以爲多列應該仍是挺有用的。雖然我沒在項目中用過，下面我簡單說下！舉個例子！這個屬性，建議加私有前綴，兼容性有待提升！
html

<div class="newspaper">
當我年輕的時候，我夢想改變這個世界；當我成熟之後，我發現我不可以改變這個世界，我將目光縮短了些，決定只改變個人國家；當我進入暮年之後，我發現我不可以改變咱們的國家，個人最後願望僅僅是改變一下個人家庭，可是，這也不可能。當我如今躺在牀上，行將就木時，我忽然意識到：若是一開始我僅僅去改變我本身，而後，我可能改變個人家庭；在家人的幫助和鼓勵下，我可能爲國家作一些事情；而後，誰知道呢?我甚至可能改變這個世界。
</div>

css

.newspaper
{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule:2px solid #000;
    -webkit-column-rule:2px solid #000;
    -mox-column-rule:2px solid #000;
}

17.盒模型定義

box-sizing這個屬性，網上說法是：屬性容許您以特定的方式定義匹配某個區域的特定元素。

這個你們看着可能不知道在說什麼，簡單粗暴的理解就是：box-sizing:border-box的時候，邊框和padding包含在元素的寬高以內！以下圖

box-sizing:content-box的時候，邊框和padding不包含在元素的寬高以內！以下圖

18.媒體查詢

媒體查詢，就在監聽屏幕尺寸的變化，在不一樣尺寸的時候顯示不一樣的樣式！在作響應式的網站裏面，是必不可少的一環！不過因爲我最近的項目都是使用rem佈局。因此媒體查詢就沒怎麼用了！可是，媒體查詢，仍是很值得一看的！說不定哪一天就須要用上了！

栗子代碼以下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>

<h1>重置瀏覽器窗口查看效果！</h1>
<p>若是媒體類型屏幕的可視窗口寬度小於 960 px ，背景顏色將改變。</p>
<p>若是媒體類型屏幕的可視窗口寬度小於 480 px ，背景顏色將改變。</p>

</body>
</html>

運行效果

19.混合模式

混合模式，就像photoshop裏面的混合模式！這一塊，我瞭解過，在項目上沒用過，可是我以爲這個應該不會沒有用武之地！
css3的混合模式，兩個（background-blend-mode和mix-blend-mode）。這兩個寫法和顯示效果都很是像！區別就在於background-blend-mode是用於同一個元素的背景圖片和背景顏色的。mix-blend-mode用於一個元素的背景圖片或者顏色和子元素的。看如下代碼，區別就出來了！

這一塊圖片不少，你們看圖片快速掃一眼，看下什麼效果就好！

background-blend-mode

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            width: 480px;
            height: 300px;
            background:url('test.jpg')no-repeat,#09f;
        }
    </style>
    <body>
        <!---->
        
        <p>原圖</p>
        <div></div>
        <p>multiply正片疊底</p>
        <div style="background-blend-mode: multiply;"></div>
        <p>screen濾色</p>
        <div style="background-blend-mode: screen;"></div>
        <p>overlay疊加</p>
        <div style="background-blend-mode: overlay;"></div>
        <p>darken變暗</p>
        <div style="background-blend-mode: darken;"></div>
        <p>lighten變亮</p>
        <div style="background-blend-mode: lighten;"></div>
        <p>color-dodge顏色減淡模式</p>
        <div style="background-blend-mode: color-dodge;"></div>
        <p>color-burn顏色加深</p>
        <div style="background-blend-mode: color-burn;"></div>
        <p>hard-light強光</p>
        <div style="background-blend-mode: hard-light;"></div>
        <p>soft-light柔光</p>
        <div style="background-blend-mode: soft-light;"></div>
        <p>difference差值</p>
        <div style="background-blend-mode: difference;"></div>
        <p>exclusion排除</p>
        <div style="background-blend-mode: exclusion;"></div>
        <p>hue色相</p>
        <div style="background-blend-mode: hue;"></div>
        <p>saturation飽和度</p>
        <div style="background-blend-mode: saturation;"></div>
        <p>color顏色</p>
        <div style="background-blend-mode: color;"></div>
        <p>luminosity亮度</p>
        <div style="background-blend-mode: luminosity;"></div>
    </body>
</html>

運行效果

mix-blend-mode

代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            padding: 20px;
            width: 480px;
            background: #09f;
        }
    </style>
    <body>
        <p>原圖</p>
        <div><img src="test.jpg"/></div>
        <p>multiply正片疊底</p>
        <div><img src="test.jpg" style="mix-blend-mode: multiply;"/></div>
        <p>screen濾色</p>
        <div><img src="test.jpg" style="mix-blend-mode: screen;"/></div>
        <p>overlay疊加</p>
        <div><img src="test.jpg" style="mix-blend-mode: overlay;"/></div>
        <p>darken變暗</p>
        <div><img src="test.jpg" style="mix-blend-mode: darken;"/></div>
        <p>lighten變亮</p>
        <div><img src="test.jpg" style="mix-blend-mode: lighten;"/></div>
        <p>color-dodge顏色減淡模式</p>
        <div><img src="test.jpg" style="mix-blend-mode: color-dodge;"/></div>
        <p>color-burn顏色加深</p>
        <div><img src="test.jpg" style="mix-blend-mode: color-burn;"/></div>
        <p>hard-light強光</p>
        <div><img src="test.jpg" style="mix-blend-mode: hard-light;"/></div>
        <p>soft-light柔光</p>
        <div><img src="test.jpg" style="mix-blend-mode: soft-light;"/></div>
        <p>difference差值</p>
        <div><img src="test.jpg" style="mix-blend-mode: difference;"/></div>
        <p>exclusion排除</p>
        <div><img src="test.jpg" style="mix-blend-mode: exclusion;"/></div>
        <p>hue色相</p>
        <div><img src="test.jpg" style="mix-blend-mode: hue;"/></div>
        <p>saturation飽和度</p>
        <div><img src="test.jpg" style="mix-blend-mode: saturation;"/></div>
        <p>color顏色</p>
        <div><img src="test.jpg" style="mix-blend-mode: color;"/></div>
        <p>luminosity亮度</p>
        <div><img src="test.jpg" style="mix-blend-mode: luminosity;"/></div>
    </body>
</html>

運行效果

20.小結

好了，我的總結的css3的新特性，就到這裏了！其中有一些新特性若是想使用的好，必須多去了解和練習。有些新特性，若是要單獨詳細的講，好比動畫，過渡，彈性盒子，漸變等。估計能夠寫幾篇或者十幾篇文章！特別是動畫，估計寫一本書均可以！上面對css3新特性的講解和案例，都是基礎的認識和用法，但願能起到一個拓展思惟的做用。最重要的是，你們要多加練習，實操是最重要的一環，孰能生巧也是這樣來的！css3不只要會用，也要用好，用好css3，在項目的開發上，頗有幫助的！固然若是我有發現什麼好玩的，有用的，我會繼續寫文章。
最後，若是你們以爲我哪裏寫錯了，寫得很差，或者有什麼推薦的！歡迎指點！

-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。