神刀安全网

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

实现效果如下:

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

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.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 小技巧 – 利用 border 实现菜单图标

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址