css - 背景动画忽略FF中的边框半径

Question

背景使用动画反复淡入淡出。背景填充似乎忽略了 DIV 的边框半径。它似乎在 chrome 中按预期工作，但在 FF (v 78.11) 中没有。想知道我是否应该使用某些 Mozilla 特定属性？DIV 显示半径，动画做它应该做的，角只是没有被剪裁以适应半径。我猜是FF错误？

div {
  width: 50%;
  height: 40px;
  border: 2px solid black;
  display: inline-block;
  box-sizing: border-box;
  text-align: center
}

div:first-child {
  border-top-left-radius: 16px;
}

div:nth-child(2) {
  border-top-right-radius: 16px;
}

.warning {
  animation: WARNING-FLASH 1s infinite;
  border-top-left-radius: 16px;
}

@keyframes WARNING-FLASH {
  0% {
    background-color: #cc190c00;
  }
  50% {
    background-color: #cc190c;
  }
  100% {
    background-color: #cc190c00;
  }
}

<div class="warning">testing</div><div>some stuff</div>

标签： cssfirefox