Блог

Главная - Вопросы по программированию - переполнение: нет, вызывающее пикселизацию на краю контейнера

переполнение: нет, вызывающее пикселизацию на краю контейнера

#css

Вопрос:

Я участвовал в CSS-битве на cssbattle.dev, когда я столкнулся с неожиданной пикселизацией, когда я установил свой содержащий элемент на переполнение: нет.

Я не уверен, почему это происходит, как это исправить или что происходит. Чтобы было ясно, меня не интересуют альтернативные решения для достижения той же формы, я хотел бы знать, что происходит и есть ли способ это исправить.

Это мое, со странной пикселизацией против цели.

введите описание изображения здесь

Вот 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>
Метки: ,