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

Answer 2

为什么不试着转动呢？

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