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 侧边框效果，我最初的想法是第一个菜单有 3 侧阴影，顶部，左侧和右侧，然后子菜单将具有 4 边框shadown 并位于该菜单后面并稍微向上，因此它被叠加但它不起作用，因为我不能有一个 3 侧框 shadown。

有没有其他最佳方法来制作这些？

Answer 1

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

有关类似示例，请参见此答案。