CSS 径向渐变投影 - 反转

Question

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

我只想 "reverse" 椭圆 "shadow effect" 这样只有 top 一半的阴影可见。看起来很简单。我迷路了。

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

.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

为什么不尝试旋转它呢？

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

Answer 2

当前使用的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%，就像下面的代码片段一样。

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

CSS 径向渐变投影 - 反转

CSS radial gradient drop shadow - reversed

css

gradient

radial-gradients

css-shapes