html - li元素背景在转换时不遵循边界半径

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来解决此问题，但与其将position: relative和z-index: 1放在li元素中，不应该将其放置在ul父级中。

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

请参阅此JSFiddle以获取其正常工作的示例。

关于html - li元素背景在转换时不遵循边界半径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38922959/