因为题解页的pre code 标签，比较单调，一直有想把这个标签模拟成 macos 的菜单栏的想法。

最早想使用 三个 span 标签或 行内块元素着色来实现，后来在网上看到一种极简的实现思路：

用了伪类和box-shadow来实现

在我的逻辑中每个元素都有::before 和::after 两个伪元素，可以模拟 2 个按钮，但是第三个按钮就要再添加一个实体元素，或是再套一个元素的 before或after 来排成一排。

pre {
    border-radius: 20px;
    overflow: hidden;
    background-color: #ebedf1;
    line-height: 1.6;
}

pre::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fd6458;
    box-shadow: 20px 0 0 #ffbf2b, 40px 0 0 #24cc3d;
    margin: 15px 20px 5px;
}

但上面的代码直接使用before 来绘制红色圆点，使用 box-shadow 偏移 可以实现不限数量的圆点，即每一层阴影都缩小成一个小圆点，依次做相对定位。

真的是妙不可言！！！

image.png