欢迎来到.NET绿叶网!

伪元素:before和:after的用法

2014-11-20 伪元素 :before :after :before用法 :after用法

使用伪元素:before和:after给照片添加阴影

一个名叫Paul UnderwoodWEB程序员使用伪元素:before and :after制作出了完美惊艳的相片阴影效果。其中的技巧是使用绝对定位固定伪元素,然后给它们的z-index一个负值,以背景出现。

伪元素:before和:after的用法

使用伪元素:before和:after制作3D按钮

这是一个非常典型的使用伪元素配合CSS3的box-shadow制作3D按钮的例子,最神奇的是,这个漂亮的效果没有使用任何图片,是用纯CSS和另外一个HTML标记绘制出的。其中:before伪元素用来显示按钮左侧的数字 “1″。

伪元素:before和:after的用法

使用伪元素:before和:after制作照片堆叠效果

只使用一张图片来创造出一堆图片叠摞在一起的效果,能做到吗?当然,关键是要使用伪元素:before和:after来帮助呈现。把这些伪元素的z-index设置成负值,让它们以背景方式起作用。

伪元素:before和:after的用法

伪元素:before和:after的用法总结

伪元素:before和:after非常的简单,但也非常的酷,而且非常的有用处,使用它们能生成复杂的页面呈现效果,但它们却不会给你的HTML代码增加任何额外的代码——因为它们是不存在的“伪”元素。你要你有足够的想象力,你可以用它实现任何的效果。

更好的消息是,这些伪元素的语法还在进一步的增强,比如“嵌套”伪元素 div::before::before { content: ''; } 和 多重伪元素 div::before(3) { content: ''; },这些功能显然使我们的WEB设计开发开启了更大的想象空间。