CSS 径向渐变投影 - 反转

Question

从 Wordpress 模板中提取一些预先存在的代码来绘制椭圆阴影。阴影呈椭圆形向下辐射。只有椭圆的下半部分可见，从而形成底部阴影效果。

我只是想“反转”椭圆的“阴影效果”，以便只有阴影的顶部 一半可见。看起来很简单。我迷路了。

我认为是绘制径向阴影的代码片段:

.fusion-separator.sep-shadow {
  height: 1px;
  overflow: visible;
  border: none;
  background: none;
  background: linear-gradient(left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=1);
}
.fusion-separator.sep-shadow:after {
  display: block;
  margin-top: 10px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

Live example on site:

Existing Radial Shadow

Answer 1

radial-gradient当前使用的是位于 50% - 50% 的位置，它只是容器水平中心(X 轴)表示的点和上方容器高度的一半的点容器本身(在 Y 轴上)。对于这种情况，它将位于 (50%, -3px) 处，因此只有椭圆的下半部分可见。

要使椭圆的上半部分可见，只需调整定位，使其位于容器下方而不是上方(即，将其设置为 (50% + 100%) 而不是(50% - 100%))。在此之后，我假设您希望它位于父元素之上，因此相对于父元素绝对定位，然后将 top 设置为 -1 * 伪元素的高度。

background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);

.fusion-separator.sep-shadow {
  position: relative;
  height: 50px;
  overflow: visible;
  border: none;
  background: linear-gradient(to left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
}
.fusion-separator.sep-shadow:after {
  position: absolute;
  content: '';
  top: -6px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='fusion-separator sep-shadow'></div>

---

如果您希望椭圆的较暗部分可见，您也可以将其定位为 50% 100%，如下面的代码片段所示。

.fusion-separator.sep-shadow {
  position: relative;
  height: 50px;
  overflow: visible;
  border: none;
  background: linear-gradient(to left, rgba(150, 150, 150, 0) 0%, rgba(150, 150, 150, 0) 15%, rgba(150, 150, 150, 0.65) 50%, rgba(150, 150, 150, 0) 85%, rgba(150, 150, 150, 0) 100%);
}
.fusion-separator.sep-shadow:after {
  position: absolute;
  content: '';
  top: -6px;
  height: 6px;
  width: 100%;
  content: '';
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5) 0px, rgba(255, 255, 255, 0) 65%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='fusion-separator sep-shadow'></div>