谷歌首页开发：如何将汉堡菜单改为9点（Bento）菜单？

嘿，我懂你想实现谷歌那个9点的Bento菜单，但用text-decoration: dotted没生效的困惑——这很正常，因为这个CSS属性是专门给文本内容加装饰线的，你的.bento-string是没有文本的空div，完全吃不到这个属性的效果，它根本不是用来修改块元素背景线条的工具~

咱们分两种情况解决，看你实际需求：

一、实现标准的谷歌9点Bento菜单 #

如果你要的是谷歌首页那种3x3的圆点网格，那之前的汉堡菜单结构就不对啦，换用Grid布局来做最直观：

CSS 代码 #

.bento-menu {
  width: 35px;
  height: 35px;
  display: grid;
  /* 分成3列3行，每列每行占1份空间 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px; /* 控制点之间的间距，可按需调整 */
}

.bento-dot {
  background-color: black;
  border-radius: 50%; /* 把方块变成完美圆点 */
}

HTML 代码 #

<div class="bento-menu">
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
</div>

这样出来的就是和谷歌一模一样的9点网格图标，布局清晰还容易调整大小和间距。

二、把现有汉堡菜单的线条改成点状 #

如果你只是想把原本的三条横线改成点状线条（不是9点菜单），那可以用背景渐变来模拟：

修改后的CSS 代码 #

.bento-string {
  width: 35px;
  height: 5px;
  /* 用线性渐变循环生成黑色圆点+透明间隔 */
  background-image: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 8px 5px; /* 第一个值控制点大小，第二个值控制线条高度 */
  margin: 6px 0;
}

这个方法是通过重复渐变背景来实现点状效果，因为纯色背景没法直接变成点状，渐变可以灵活控制每个点的大小和间距。

内容的提问来源于stack exchange，提问作者John Englund