css每日一练：一个矩形的左边竖条实现

愿世界都安静下来，每天似乎都需要一段安静的时间来写一点东西。给自己一份安静。
       这篇文章是来自chokcoco。也是看到他的，萌生了这种想法。每天都做一做css。也可能一两天做一个。先像前辈学习吧！
  首先第一个css案例：

Paste_Image.png

 要求：解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

定义一个标签

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

通用css：

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

第一种：border， 这是我第一反应就想到的方法

.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%;
    }

采用内外阴影的来显示效果。

ps：盒阴影知识点
  阴影可以有多重阴影，阴影不可以不虚化。
  盒阴影还有一个参数inset，用于设置内阴影。

第三种：linear-gradient

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

采用线性渐变来实现我们想要的东西。

ps：渐变知识点
    1、线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, ...)
    2、通过指定水平和垂直的起始位置来制作一个对角渐变
   3、角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。但是，请注意很多浏览(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
    4、兼容10以上。ie9不支持。

第四种：filter

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

采用css3新增的滤镜来实现。

ps：知识点 drop-shadow知识点
   drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影，不过它的数值参数个数只有 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;
    }
  
  采用伪元素可以实现效果。
  算上before 与 after 有三个标签。具体详情可参照：  [before于after详解](http://blog.jobbole.com/49173/)

  目前测试了这几种，并掌握了样式的灵活性。还是需要一步一步累计。给自己一个安静的时间，放慢一下时间。这是补上的。后面还会继续。