不应用背景时，边框半径不起作用答案

【问题标题】：Border-radius doesn't work when background isn't applied不应用背景时，边框半径不起作用
【发布时间】：2019-07-31 23:16:41
【问题描述】：

为什么当背景没有应用于动画时，边框半径不起作用。

边框半径仅在应用背景为 0%-50%-100% 时有效。没有背景颜色，边框半径不起作用。

我希望边框半径从正方形变为圆形，然后再变回正方形。

    .square {
      /* Set up the normal state */
      display: block;
      width:350px;
      height:350px;
      margin: 200px auto;
      background:#41A9F0;
      /* apply the animation */
      animation: box 5s linear infinite;
    }
    @keyframes box {
      0% {
        transform: rotate(0) scale(0.2);
        /* background: #41A9F0; */
        border-radius: 0%;
      }

      50% {
        transform: rotate(180deg) scale(2);
        /* background: #5ABE8A; */
        border-radius: 50%;
      }

      100% {
        transform: rotate(360deg) scale(0.2);
        /* background: #41A9F0; */
        border-radius: 0%;
      }
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shape Animation Challenge</title>
</head>
<body>
  <!-- HINTS
    1) Open shape-animation-ANSWER.html in your browser and try to create the final product.
    2) Create a keyframe named box.
    3) There are three points to this animation, starts off as a square, then a circle (background color for the circle is #5ABE8A), then back to a square.  
    Hint: You will need the properties border-radius and transform -->
  <div class="square"></div>

</body>
</html>

【问题讨论】：

我不太关注。您可以删除背景，它仍然有效？请参阅jsfiddle.net/Larfk32m 仅供参考：我在元素上设置了边框，因此您仍然可以看到元素/动画。
我的问题是为什么没有背景它不能工作？背景是否设置了使边框半径起作用的默认边框？

标签： html css css-animations

【解决方案1】：

没有任何背景颜色，您看不到动画，但它仍然存在。

这是一个示例，您的动画也应用于没有背景颜色但有边框的 div（看看会发生什么）

https://jsfiddle.net/cjohm3xb/1/

   .square-border {
      border:1px solid red;
      /* apply the animation */
      animation: box 8s linear infinite;
    }

【讨论】：

所以我从中得到的是背景没有为要应用的边框半径设置边框，因此动画仍然存在，但边框没有改变，因为背景不包括边框？

【解决方案2】：

我已经在 Chrome 75.0.3770.142 和 Edge 44.17763.1.0 中测试了您的代码。你提供了一个彩色的div，所以你可以看到动画。尝试移除背景并添加一个子元素，可以是文本或其他内容，然后您会看到相同的效果。如果您删除背景和所有孩子，显然您“会看到”一个空的动画div，实际上屏幕上什么都没有！

我尝试使用关键帧、背景和边框半径。该页面似乎工作正常。检查此样式表：

.square {
  /* Set up the normal state */
  display: block;
  width:350px;
  height:350px;
  margin: 200px auto;
  /* apply the animation */
  background: #41A9F0; 
  animation: box 5s linear infinite;
}
@keyframes box {
  0% {
    transform: rotate(0) scale(0.2);
    background: #41A9F0;
    border-radius: 0%;
  }

  10% {
    background: green;
    border-radius: 50%;
  }

  25% {
    background: blue;
    border-radius: 10%;
  }

  50% {
    background: red;
    transform: rotate(180deg) scale(2);
    border-radius: 30%;
  }

  100% {
    transform: rotate(360deg) scale(0.2);
    background: yellow;
    border-radius: 0%;
  }
}

请记住，边界半径的百分比值从 0 到 50。任何高于 50 的值都只是 50。来源：https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9

您可以提供您正在使用的浏览器或至少更好地解释问题，社区可以提供更好的答案。

【讨论】：