为什么在顶部和形状之间显示边框？

Question

我刚刚开始学习html和css，我一直在练习CSS Battles，我不知道为什么在我的“容器”类中显示了边框。

<div class="container">
  <div class="circle"></div>
  <div class="square"></div>
</div>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #004416;
  }

  .container {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    background-color: #004416;
    border: 30px solid;
    border-radius: 50%;
    border-color: #8FCEA5
  }

  .square {
    position: absolute;
    top: -80;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    width: 130px;
    height: 130px;
    background-color: #004416;
    border: 30px solid;
    border-color: #8FCEA5;
  }
</style>

我想重新制定CSS Battle的每日目标29/11/2023。

Answer 1

您能分享一下您所看到的大纲的屏幕截图吗？我通过在线编译器尝试过，但我在这里看不到该轮廓