css制作菜单图标

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

最近在看css相关的东西, 正好掘金有活动可以写一些小知识点作为短文章,所以我也整理一下一些css方面的小知识作为文章发出来,方便巩固自己学到的一些东西. 本文章分享的内容用css制作菜单图标的几种方法.

方法一

用padding和background-clip属性来实现, 具体的实现代码在下面:

  <div class="menu"></div> 
  <style>
    :root {
      --menu-height: 10px;
      --menu-color: lightslategray;
    }
    .menu {
      width: 50px;
      height: var(--menu-height);
      padding: var(--menu-height) 0;
      border-top: var(--menu-height) solid var(--menu-color);
      border-bottom: var(--menu-height) solid var(--menu-color);
      background: var(--menu-color);
      background-clip: content-box;
    }
  </style>

我们先设置menu-height变量设置高度、menu-color设置颜色. 容器整体高度设置成10px,再使用background-clip设置成content-box, 这里我们先看一下MDN上对background-clip的解释:

设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面

设置成content-box的话, 则说明背景只在内容盒子上有效. 这样的话,我们再设置上下的padding为10px,设置成padding的区域则是透明色,不会被设置的背景影响.最后我们再设置上下的border为10px,颜色和之前设置的背景色一致. 这样我们想要的菜单图标就做好了. 值得一提的是,如果我们把上边的代码稍微改变一下, 高度改成50px,和宽度保持一致,然后padding四边都为10px, border也四边都为10px,再加上border-radius为50%变成圆形. 它就变成了类似一个单选按钮的形状了.

.menu {
  width: 50px;
  height: 50px;
  padding: var(--menu-height);
  border: var(--menu-height) solid var(--menu-color);
  background: var(--menu-color);
  background-clip: content-box;
  border-radius: 50%;
}

方法二

方法二是纯使用border来实现的,以下是实现的代码:

<div class="menu"></div> 
<style>
:root {
  --menu-height: 10px;
  --menu-color: lightslategray;
}
.menu {
  width: 50px;
  height: var(--menu-height);
  border-top: calc(3 * var(--menu-height)) double;
  border-bottom: var(--menu-height) solid;
  border-color: var(--menu-color);
}
</style>

这里我们主要是要理解以下border里边的一个值double的意思, 这个在我们项目中可能很少用到,不常见,但是其實它的兼容性其实是非常好的. 在MDN上double上的解释是

显示为一条双实线，宽度是 border-width

double显示的是一条双实线,所以我们看一下我们实现的代码. border-top设置的是3倍的高度. 也就是30px,其中双实线宽度各10px,间距10px.加起来就是30px了.然后再设置border-bottom为10px, 这样其实就实现好了,我们的图标菜单了. 实现效果和上边的是一致的. 我就不再截图了.

寫在最后

以上就是我整理的两种实现菜单图标的方式(顺便实现了一下单选图形). 以上主要是理解了background-clip属性和border: double这两个,就大致知道怎么实现它了. 好了, 那么我们明天见咯! 如果以上内容对你有帮助的话, 可以帮忙给文章点一个赞, 谢谢啦~