1、背景
前几天看到一篇文章里面嵌了一个很好看的渐变色阴影的卡片（无奈它是一张图片，所以也就看不到样式），图片是这样的：
作为一个练习时长三年半的 “CSS 菜鸡”，我寻思着这玩意儿能用 CSS 实现不？于是，好奇心驱使下，我们捣鼓了一番，“优雅地”实现了这个效果。
我一开始冒出来的想法是，这可能是用 box-shadow 属性实现的，它的语法是这样的：
box-shadow: offset-x offset-y blur spread color position;
color 换成渐变色？试试...
年轻了，color 和 linear-gradient 不是一个世界的，显然是 not ok 的，完全没有效果！
那难道背景是个高斯模糊（最底下是个渐变背景）？或者叠三层（底层纯色，中间一层渐变色，上层卡片），然后用定位处理？好像理论上是可以的。。。
但是总觉得这么实现有点不优雅，属于是莽夫行为 ~ 有啥比较优雅点的实现吗？翻了一下 CSS 表，我找到了答案：是的，有！它就是伪元素 ::before 或者 ::after。
来看效果：
直接上代码：
<body> <div class="card-wrapper"> <div class="card"> <h2>ian_kevin</h2> <p>"_你当像鸟飞往你的山"</p> </div> </div> </body>
于是，我对这俩做了深入的了解。
2、伪元素 ::before 和 ::after
什么是伪元素？
我想很多经验丰富的 FEer 应该还记得清除浮动的几个技巧，以前比较常用的就是伪元素：
.clearFix::after,.clearFix::before { display: block; content: ''; clear: both; visibility: hidden; height: 0; } .clearFix { zoom: 1;}
CSS中的::before和::after伪元素允许你在页面上插入内容，而不需要出现在HTML的结构中。虽然最终的结果实际上并不在DOM中，但它在页面上的显示就像它在DOM中一样，基本上是这样的：
div::before { content: "before"; } div::after { content: "after"; }
结果是：
<div> before <!-- ... --> after </div>
需要注意的是，有些地方写法是单冒号：:before 和 :after，实际上这是新旧写法，支持双冒号（::）CSS3语法的浏览器也都支持（:）语法，IE8 只支持单冒号，所以目前建议只使用单冒号以获得最佳的浏览器支持。:: 是较新的格式，旨在区分伪内容和伪选择器。如果你不需要 IE8 的支持，可以随意使用双冒号。
浏览器支持方面：
我们通常会在如下场景下使用它：
- 生成的内容在元素内容之前，但是又不想额外增加一层DOM。
::after的内容在源顺序上也是 "后" 的，所以如果自然堆叠在一起，它的位置会在::before之上。
注意，内容仍然在它们所应用的元素里面。这个命名的感觉就像它们可能渲染在元素之前或之后，但实际上是在里面的其他内容之前或之后。
我想最重要的可能是它里面的 content 属性了，它可以放很多类型的值：
- 一个字符串：
content："一个字符串";- 特殊字符需要被特别编码为一个unicode entity。 - 一张图片：
content：url(/path/to/image.jpg);- 图片会以它的精确尺寸插入，不能调整大小。因为像渐变这样的东西实际上是图像，一个伪元素可以是一个渐变。 - nothing:
content："";- 对clearfixes和插入图像作为背景图像很有用（设置宽度和高度，甚至可以用background-size调整大小）。 - counter：
content：counter(li);- 对列表的样式非常有用（::marker也用于此）。 - 一个断行符：
content："Killing \A Me \A Softly";- 有时候非常有用。
实际上你还可以插入html，只是没有任何效果。
3、用伪元素实现彩虹渐变效果
上代码：
<div class='db-cycle'></div>
学到了这个，以后一些常规的效果，实际上就不需要去找UI了，省得被骂是IKUN粉~
end~
