愿世界都安靜下來，每天似乎都需要一段安靜的時間來寫一點東西。給自己一份安靜。
???????這篇文章是來自chokcoco。也是看到他的，萌生了這種想法。每天都做一做css。也可能一兩天做一個。先像前輩學(xué)習(xí)吧！
??首先第一個css案例：

Paste_Image.png

?要求：解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習(xí)一下吧。

定義一個標(biāo)簽

 <div class="css"></div>

通用css：

div{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

第一種：border， 這是我第一反應(yīng)就想到的方法

.css1 {
        width: 300px;
        height: 50px;
        background: #27acff;
        border-left: 3px solid #ff0000;
        margin: 0 auto;
        margin-top: 20%;
    }

第二種：box-shadow

.css1 {
        width: 300px;
        height: 50px;
        background: #27acff;
        box-shadow: -3px 0px 0 0 #ff0000;
        margin: 0 auto;
        margin-top: 20%;
    }

采用內(nèi)外陰影的來顯示效果。

ps：盒陰影知識點
??陰影可以有多重陰影，陰影不可以不虛化。
??盒陰影還有一個參數(shù)inset，用于設(shè)置內(nèi)陰影。

第三種：linear-gradient

.css3 {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        background: #27acff;
        background-image: linear-gradient(90deg, #ff0000 0px, #ff0000 5px, transparent 5px);
    }

采用線性漸變來實現(xiàn)我們想要的東西。

ps：漸變知識點
??? 1、線性漸變語法：background: linear-gradient(direction, color-stop1, color-stop2, ...)
??? 2、通過指定水平和垂直的起始位置來制作一個對角漸變
???3、角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創(chuàng)建一個從下到上的漸變，90deg 將創(chuàng)建一個從左到右的漸變。但是，請注意很多瀏覽(Chrome,Safari,fiefox等)的使用了舊的標(biāo)準(zhǔn)，即 0deg 將創(chuàng)建一個從左到右的漸變，90deg 將創(chuàng)建一個從下到上的漸變。換算公式 90 - x = y 其中 x 為標(biāo)準(zhǔn)角度，y為非標(biāo)準(zhǔn)角度。
??? 4、兼容10以上。ie9不支持。

第四種：filter

  .css4 {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        background: #27acff;
        filter: drop-shadow(-5px 0 0 #ff0000);
    }

采用css3新增的濾鏡來實現(xiàn)。

ps：知識點 drop-shadow知識點
?? drop-shadow 是 CSS3 新增濾鏡 filter 中的其中一個濾鏡，也可以生成陰影，不過它的數(shù)值參數(shù)個數(shù)只有 3 個，比之 box-shadow 少一個。

第五種：before 與 after

   .css5 {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        position: relative;
        background: #27acff;
    }
    ~~~
    .css5::after {
        content: "";
        width: 3px;
        height: 50px;
        position: absolute;  
        top: 0;
        left: 0;
        background: #FF0000;
    }
  
??采用偽元素可以實現(xiàn)效果。
??算上before 與 after 有三個標(biāo)簽。具體詳情可參照：  [before于after詳解](http://blog.jobbole.com/49173/)

??目前測試了這幾種，并掌握了樣式的靈活性。還是需要一步一步累計。給自己一個安靜的時間，放慢一下時間。這是補上的。后面還會繼續(xù)。