li元素背景不服从转换的边界半径

Question

下面JSFiddle中的代码会创建一个菜单栏，其周围有一个边框。我认为如果我在li元素上添加一个效果，当您点击它以帮助显示li元素是active时，可能会很好。为此，我在li

的active元素上添加了以下翻译

box-shadow: 0 -3px hsl(180, 0%, 22%);
@include transform(translate(0, 2px)); //SCSS Mixin which acts the same as transform: translate(0, 2px);
@include transition(all, 0.25s); //SCSS Mixin which acts the same as transition: all 0.25s;

但是，当我使用此代码时，我注意到li元素的背景在转换过程中没有遵循边界半径。所以我做了一些研究，发现这个answer找到了同样问题的问题。但是，这并没有为我提供解决方案。我很感激任何帮助使背景遵循边界半径。

查看图片以获取问题的视觉帮助，并查看JSFiddle代码示例

JSFiddle

Answer 1

事实证明，使用此answer仍然可以解决此问题，但不应将position: relative和z-index: 1放在li元素中，而应放在ul中父节点。

ul {
  position: relative;
  z-index: 1;
  ...
}

请参阅此JSFiddle，例如它的工作原理。