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

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

5 голосов
/ 08 июня 2019

Когда у меня есть круг в css с фоном: радиальный градиент (круг с 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>

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

Ответы [ 2 ]

4 голосов
/ 08 июня 2019

Один из способов исправить это - заставить фон покрывать только содержимое. 

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

РЕДАКТИРОВАТЬ: Использование наложения 

*,
*:before,
*:after {
  box-sizing: border-box;
}

.style {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /*   border: 27px solid #00000030; */
  background: radial-gradient(circle at 75px 50px, #5cabff, #003);
}

.style:after {
  content: '';
  border: 27px solid #00000030;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
}
<div class="style"></div>

РЕДАКТИРОВАТЬ: несколько фонов 

.style {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
  radial-gradient(#ffffff00 73px, #00000030 73px), radial-gradient(circle at 75px 50px, #5cabff, #003);
}
<div class="style"></div>
2 голосов
/ 09 июня 2019

Вам нужно настроить 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>

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

...