如何构建这些自定义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>

我遇到的问题是盒子阴影没有3个边框效果，我最初的想法是第一个菜单有3个侧面阴影，顶部，左边和右边，然后子菜单将会有4边框阴影并且在菜单后面稍微向上，所以它叠加了但是它不起作用，因为我不能有3个边框阴影。

还有其他最佳方式来制作这些吗？

Answer 1

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

有关类似示例，请参阅this answer。