理解伪元素 :before 和 :after

transition: all 350ms; 
 
-o-transition: all 350ms; 
 
-moz-transition: all 350ms; 
 
-webkit-transition: all 350ms;

更多的灵感

迷人的暗影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)

在这个教程中 Paul Underwood 说清楚明了若何创建加倍逼真和吸惹人的暗影效不雅。

应用伪元素:before 和 :after 。它们两个都是绝对定位，并且应用负z-index来放置到图片后方实现暗影效不雅。

这是一个异常聪慧的实现，应用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮，仅仅应用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。

叠加图像效不雅

结论

3D按钮

伪元素很酷同时也是可应用到实际工作中的，根本上，每一个我们所添加的元素都不会干扰现有的HTML构造，并且伪元素可以做到几乎所有我们能想到的工作。

实际上有一些伪元素的改进工作,今朝慢慢进行，比如伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然，在将来的web设计中，这些改进会让我们的设计有更多的情势(更多的可能性)。然而，他们将会在最新的浏览器中获得支撑，让我们如今耐烦的等待吧!

【编辑推荐】

现代前端开起身术栈
前端模板的道理与实现
前端机能优化以及解决筹划
现代前端开起身术栈
前端实现文件的断点续传

【义务编辑：枯木 TEL：（010）68476606】

举例来说，下面的代码片段将在引用的之前和之后分别添加添加一个引号。

4/4 首页上一页 2 3 4

　　推荐阅读

　　EPS应急电源的应用常见问题合集

EPS的全称为紧急电力供给，其肩负着在电力不足的间谍作况下供给备用电力的义务。与UPS电源不合，EPS应急电源并>>>详细阅读

本文标题：理解伪元素 :before 和 :after

地址：http://www.17bianji.com/lsqh/36606.html

1/2 1