CSS径向渐变阴影 - 反转

Question

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

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

我认为是绘制径向阴影的代码 sn-p：

.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 * height of the pseudo element。

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%，如下面的 sn-p。

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

Answer 2

为什么不尝试旋转它？

.fusion-separator {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}