CSS径向渐变投影-反转

Question

CSS径向渐变投影-反转

4

我有一些来自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%);
}

网站上的实例:

现有的径向阴影

- digitalJE5U5

2个回答

-1

为什么不尝试旋转它？

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

- Jonathan Zúñiga

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

目前使用的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>