近期在做各大公司Web前端笔试题的时候，收获颇丰，让我感受强大的CSS的魅力，真的好神奇！
下面是一个demo：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#demo {
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
}
#demo:after,#demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 10px;
border-left-color: #fff;
top: 20px;
}
#demo:before {
border-width: 12px;
border-left-color: #000;
top: 18px;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
将这段代码保存成.html文件，放入浏览器中运行，你会发现一个非常有个性的图片：
这里是用css中的伪类元素（:before和:after）来实现的，:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或之后插入一个包含content属性指定内容的行内元素。
再来一枚栗子，八卦图，哈哈：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
/*这里换成border-radius:50%发现效果是一样的*/
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>
其中学到的小技巧不仅仅包括伪类元素的使用，还有如何“画”一个圆，用border-radius来控制就好了，一般设置成50%或100%都能达到画圆的效果。效果图如下：
好啦，今天学到得不少呢，继续怀挺！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。