美文网首页前端++
情人节,你比心了么?- 用 9 种 CSS 方式画“心”

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

作者: 白蜀黍 | 来源:发表于2017-02-15 00:50 被阅读9次

抱歉标题党了 :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. 欢迎来留下第一个评论(比心)

相关文章

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

    抱歉标题党了 :P。 情人节,笔者虽然有代码的陪伴(www),但是还是有些寂寞(sad)就跑来发文了,原文在自己自...

  • 用CSS给你的她(他)送颗心❤

    下面,介绍三种CSS画心形的方法。实现过程都非常简单,保证你一看就会。 1.一颗div一颗心 用一个div画出一个...

  • 情侣头像手绘

    记得爱我!么么哒! 比心!

  • 月薪过万的优质职业人,工作都用这3条方法论!!

    文/扎叔大志志 扎心调研室——用扎心唤醒你的成长本能 全文字数:2955;阅读时间:9 分钟 首先,被比自己月薪高...

  • SCSS的安装(windows)与使用

    SCSS(Sassy CSS)是什么?还比CSS多了个S,是Super CSS么? 你要是想这样理解也可以(其实是...

  • 用我的心,画你

    用我的心,画你 | 作者:丛恩 怎么办呢我是如此的向往你来时的季节尽管,我的青丝皎皎可是那上乘之风,仍然在等你躬身...

  • 我用走心,俘获你的比心

    2015年3月份,和团队去露营,在这个活动中,收获了五个词---承担、走心、坦诚、遗憾、成长。“走心”,多么撩人的...

  • 浮动

    1.1传统网页布局的三种方式 网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置。 CSS提供了三种传统布...

  • 每一天都是新的自己

    每一天,用不同的方式给自己解压,比如写写随笔,画个画。 尽管写得很差,画的不好,那总是给自己解压的一种方式,自己心...

  • 石头心了么?

    与家离别的次数越来越多,每次走的时候都会有点感伤,却不像最初的难受,多了一份舍得。 第一次与外公外婆分开,在路上我...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/hobfwttx.html