Question

当我在css中有一个背景为圆的圆：radial-gradient（圆为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>

我希望在添加不透明边框时，在圆中没有正方形，而是带有边框的3d球形。

Answer 1

一种修复方法是使背景仅覆盖内容。

.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>

Answer 2

您需要调整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>

相关以获取有关背景起源问题的更多详细信息：Why doesn't this radial-gradient complete the circle?

为什么当我使用radial-gradient（circ at）时，具有不透明度的边框会在圆内形成正方形？

2 个答案: