愿世界都安静下来，每天似乎都需要一段安静的时间来写一点东西。给自己一份安静。
这篇文章是来自chokcoco。也是看到他的，萌生了这种想法。每天都做一做css。也可能一两天做一个。先像前辈学习吧！
首先第一个css案例：
要求：解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 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/)
目前测试了这几种，并掌握了样式的灵活性。还是需要一步一步累计。给自己一个安静的时间，放慢一下时间。这是补上的。后面还会继续。