小技巧 - 利用 border 实现菜单图标

字数 158阅读 199

实现效果如下:

demo01.png

实现这个效果,我们可能直接使用图标,可能内嵌一个 span标签,也可能会使用 ::before::after 伪元素,不过这其实利用 border就可以实现,上述效果的代码如下所示:

  div {
    width: 38px;
    height: 6px;
    border-top: 18px double #F70776;
    border-bottom: 6px solid #F70776;
  }

由于 border 的颜色是继承自 color 的,所以利用以上代码,我们可以很轻松的实现一个 hover 变色效果,改写后的代码如下:

  div {
    width: 38px;
    height: 6px;
    border-top: 18px double;
    border-bottom: 6px solid;
    color: #F70776;
    cursor: pointer;
    transition: all 1s;
  }

  div:hover {
    color: green;
  }

这个技巧是在张鑫旭的教学视屏中看到的,地址如下:CSS 深入理解之 border.

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
  • 我却退缩了 在达里诺尔湖畔的黄昏 夕阳如血, 水天一色 我独自行走在苍茫的小路 却没来得及忧伤 一只与我一样孤独的...
  • 莽莽围山翠如海 山清林秀涧溪流 突泉汩汩声似乐 惹得蝉闹和鸟鸣 豪墅点点落山野 迎日送夕宾满堂 山道弯弯果香溢 正...