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); 
}