Question

当未在动画上应用背景时为什么边框半径不起作用。

仅当背景以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>

Answer 1

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

在此示例中，您的动画也应用于没有背景颜色但带有边框的div（以查看会发生什么情况）

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

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

Answer 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

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

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

2 个答案: