您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

伪元素:before和:after的用法

时间:12-19来源:作者:点击数:

使用伪元素: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设计开发开启了更大的想象空间。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门