你的位置:首页 > 软件开发 > 网页设计 > 大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

发布时间:2015-04-30 20:01:37
伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素,你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例,你想看的话就接 ...

伪元素:before:after可以做的东西是相当惊人的。对于页面上的每一个元素,你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧。

多重背景画布

大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

 

因为你可以将伪元素相对于它们的父类元素绝对定位,你可以想象成每个元素都有两个额外的层。Nicolas Gallagher向我们展示了它的很多种应用,包括多边界、模拟CSS3多重背景、等高栏等。

增加单个元素能创建的形状数目

大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

 

这上面所有的形状都可以只用一个元素创建,而且更加实用。相对于那些使用1700个div元素来“用纯CSS做一个咖啡杯”的事情,很整齐,但不实用。

这是一个六角星的示例:

CSS

#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;}#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px;}

原标题:大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录