javascript - 如何构建这些自定义 Box-shadow css3 效果？

Question

我想得到这些

这些是我正在使用的标记

<ol>
  <li><a>Campo</a>
    <ol>
      <li><a>Informacion Agricola</a></li>
      <li><a>Fabrica</a></li>
    </ol>
  </li>
  <li><a>Gastos Reales Campo</a>
</ol>

我遇到的问题是 box-shadown 没有 3 side border effect，我最初的想法是第一个菜单有 3 side shadow，顶部，左侧和右侧，然后子菜单将有4 border shadown 并位于该菜单后面并向上一点，因此它被叠加但它不起作用，因为我不能有 3 边框 shadown。

还有其他最佳制作方法吗？

Answer 1

您必须创建三个没有(或很少)模糊的独立阴影，并在三个方向上偏移它们。

参见 this answer对于类似的例子。