CSS中的Before和After伪元素

###before和after伪元素 所谓伪元素,可以理解为浏览器为某元素附加的元素(根据名字,附加在这个元素之前/之后)。用来完成特定的效果,before/after需要和content属性一起使用: .css-class:before { content: " "; } .css-class:after { content: " "; } 通过使用before/after伪元素,可以做一些很有意思的效果。这里有一些有意思的示例。 ###四个三角形 页面上经常会遇到小三角形这种视觉元素,比如表示一个可以打开/关闭的开关(将不会频繁使用的元素隐藏起来,点击可以展开/收起),或者一个模拟消息盒子(纯CSS实现),最早的做法是使用一个小的图片来完成,但是这个事实上可以通过纯CSS来实现。 原理是利用block元素的border属性,当border的值很小的时候,border之间的连接处并无异常,但是当border较大,而元素本身的尺寸小于border自身时,则每一个border都会呈现为梯形,而当元素的width和height都为0时,就会看到一个正方形,而每个边都变成了一个三角形: .container .color-box { content: " "; width: 0; height: 0; border: 10px solid transparent; border-left-color: #00ff00; border-right-color: #000000; border-top-color: #ff0000; border-bottom-color: #0000ff; } ###小三角形 这时候,如果将其他的三条边隐藏起来(通过将border的颜色置为透明): .container .color-box { content: " "; width: 0; height: 0; border: 10px solid transparent;//朝下的三角形 border-top-color: #ff0000; } 先将所有的边都设置为透明色,然后根据需要显示某一个边,来完成三角形的指向。 ###一个普通的消息框 一个普通的消息框,通过设置box-shadow和border-radius之后,可以变得比较“好看”,但是如果可以给这个消息框加上一个小的三角形(可以指向用户的头像等)。 HTML代码: <div class="container"> <div class="chat-box"> <p> Resque (pronounced like "rescue") is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later....

May 16, 2013 · 1 min · 邱俊涛 | Juntao Qiu