使 radial-gradient() 跨越两个元素

Question

我有一个由两个半圆形 div 组成的圆。我想使用 background: radial-gradient() 使圆看起来呈球形。如果不将两个半圆形 div 与一个圆形 div 重叠，我该怎么做？

[有两个半圆的原因 div 是因为圆分成两部分的过渡。不想用单个叠加的原因div也是类似的原因]

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}

Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>

Answer 1

这可以使用 calc() 将径向定位在底部半圆中的第二个中来实现。我使用的是 calc(100px - 5em)，因为 100px 是上半部分渐变中心的偏移量，5em 是一个半圆的高度。

编辑：我还必须指定渐变的大小以使它们匹配，默认情况下大小不同，可能是因为到中心和各个边的距离不同。

.top-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px calc(100px - 5em), red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}

Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>

Answer 2

调整第二个渐变位置，最重要的是给两个渐变一个半径，以避免自动值不相同，因为我们将有不同的位置和默认值大小的值为 farthest-corner

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background: radial-gradient(circle 10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background: radial-gradient(circle 10em at 100px 20px, red, #000);
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

The radial gradient syntax is:

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>

<size>

Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. ^ref

如果您想保持渐变的定义不变，您也可以使用 background-size/background-position。只需给出一个等于整体形状的尺寸（上半部分 + 下半部分）。

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background-image: radial-gradient(circle at 100px 100px, red, #000);
  background-size:10em 10em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background-position:top;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background-position:bottom;
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

另一个想法是考虑与 clip-path 重叠：

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
}
.bottom-semi-circle {
  margin-top:-10em;
  clip-path:polygon(0 100%,100% 100%,100% 50%,0 50%);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

使用 mask 的相同逻辑：

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  -webkit-mask:linear-gradient(to bottom,white 50%,transparent 0);
  mask:linear-gradient(to bottom,white 50%,transparent 0);
}
.bottom-semi-circle {
  margin-top:-10em;
  -webkit-mask:linear-gradient(to top,white 50%,transparent 0);
  mask:linear-gradient(to top,white 50%,transparent 0);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}

<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Answer 3

使用overflow hidden and pseudo elements

*{box-sizing: border-box}
[class$=circle] {
  width: 10em;
  height: 10em; 
  overflow: hidden;
  position: relative; 
  display: block;
  will-change: transform;
  transition: transform .2s ease
}
[class$=circle]:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
[class^=top]:before { 
  top: 50%;
}
[class^=bottom]:before { 
  bottom: 50%;
}
figure{
  width: 10rem;
  height: 10rem;
}
figure:hover [class^=top] {
  transform: translate3d(0, -10px, 0)
}
figure:hover [class^=bottom] {
  transform: translate3d(0, 10px, 0)
}

<figure>
  <div class="top-semi-circle"></div>
  <div class="bottom-semi-circle"></div>
</figure>

使 radial-gradient() 跨越两个元素

Make radial-gradient() span two elements

css

radial-gradients