情人节,你比心了么?- 用 9 种 CSS 方式画“心”

抱歉标题党了 :P。

情人节,笔者虽然有代码的陪伴(www),但是还是有些寂寞(sad)就跑来发文了,原文在自己自娱自乐的博客 imo++ 上,在线 demo 可以戳这里

其实严格意义上并没有九种那么多,因为好几种实现的思路是一样的 Orz。关键词有:

  • 伪元素
  • border 画三角(甚至扇形)
  • 渐变——linear-gradient 和 radial-gradient
  • SVG

实现过程中遇到了几个问题:

  • 层叠上下文

    • 问题&原因:为了使 position: absolute; 的伪元素不会遮挡文字而设置了 z-index: -1; ,但根据 层叠规则(stack order) ,此时伪元素处于所在父元素(一个 li 元素,即一个“block 块状水平盒子”)之下,即此时伪元素被有背景色的父元素遮挡了!
    [张鑫旭大神相关博客](http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)中的 *层叠规则(stack order)* 示例图(局部)
    [张鑫旭大神相关博客](http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/)中的 *层叠规则(stack order)* 示例图(局部)
    • 解决方案:对父元素设置 display: flex; 的同时对伪元素所在 div 设置 z-index: 0; (只要设置一个非负数值即可,这里的主要目的是使该 div 成为一个层叠上下文元素)。
  • SVG 中 text 的居中

    • 解决方案:见文末女神 Lea Verou 的文章

参考资料:
深入理解 CSS 中的层叠上下文和层叠顺序 by 张鑫旭
Easily center text vertically, with SVG! by Lea Verou

P.S. 欢迎来留下第一个评论(比心)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,663评论 0 7
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,584评论 1 19
  • 今天是大学的最后一次聚餐,关于梦想,关于未来,有好多话要说。 有人说毕业之后我们会变得现实,我们会被现实打磨,有很...
    沐微心语muv阅读 87评论 0 1
  • 一个人,什么都可以没有,但不能没有自信,别人瞧不起我们是别人的事,自己瞧不起自己那就完了。 任何事,没有去尝试都无...
    秘校同下阅读 314评论 2 5