Почему граница с непрозрачностью образует квадрат внутри круга, когда я использую радиальный градиент (круг в)?

Когда у меня есть круг в css с background:radial-gradient(circle at 75px 50px, #5cabff, #003) и я добавляю рамку с непрозрачностью, круг выглядит так, как будто внутри него есть квадрат. Почему это происходит и есть ли решение, чтобы этого не происходило?

.style {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 27px solid #00000030;
  background: radial-gradient(circle at 75px 50px, #5cabff, #003);
}
<div class="style"></div>

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


css radial-gradients
person Eli    schedule 08.06.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно настроить background-origin, чтобы сделать его border-box, чтобы градиент также рассматривал границу как свою область. По умолчанию для background-origin установлено значение padding-box, тогда как для background-clip установлено значение border-box, поэтому фон повторяется на границе, создавая странный эффект:

Я также добавил 27px границы к центру круга, так как теперь при расчете учитывается граница.

.style {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 27px solid #00000030;
  background: radial-gradient(circle at 102px 77px, #5cabff, #003) border-box;
}
<div class="style"></div>

Связано с получением более подробной информации о проблеме происхождения фона: Почему этот радиальный градиент не завершает круг?

person Temani Afif    schedule 08.06.2019