时间戳

首页 > 解决方案 > 溢出：没有导致容器边缘像素化

css - 溢出：没有导致容器边缘像素化

问题描述

当我将包含的元素设置为溢出时遇到一些意外的像素化时，我正在 cssbattle.dev 上进行 CSS 战斗：无。

我不确定为什么会发生这种情况，如何解决它或发生了什么。需要明确的是，我对实现相同形状的替代解决方案不感兴趣，我想知道发生了什么以及是否有办法解决它。

这是我对目标的奇怪像素化。

在此处输入图像描述

这是形状的CSS。如果这有什么不同的话，我在 Firefox 上。

  body {
    height: 100vh;
    margin: 0;
    background: #1A4341;
    display: grid;
    place-items: center;
  }
  [a] {
    background: #1A4341;
    width: 250px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  [b] {
    background: #998235;
    width: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
  }
  [c] {
    position: absolute;
    background: #F3AC3C;
    height: 20px;
    box-shadow:
      0 0 0 20px #1A4341,
      0 0 0 40px #F3AC3C,
      0 0 0 60px #1A4341;
    width: 100%;
  }
<html>
  <body>
  <div a>
    <div b></div>
    <div c></div>
  </div>
  </body>
</html>

标签： css

解决方案

推荐阅读