如何創建從A到B在一個方向上A和在另一個方向上A到B的漸變？

Question

我正在尋找創建一個漸變，從A→B→A在正X方向，而同時從A→B在負Y方向。基本上它應該是左邊的一種顏色，然後褪色成白色，然後回到第一種顏色，但應該全部在底部褪去白色。我一直在試圖用CSS來做到這一點，但我不知道這是可能的，並且願意接受其他選項

Answer 1

您可以疊加2個元素來實現這個...的jsfiddle https://jsfiddle.net/x0d5oLc4/

HTML

<div id="bfcontainer"> 
<div id="bluefade"></div> 
<div id="whitefade"></div> 
</div> 

css

#bfcontainer { 
    position:relative; 
} 

#bluefade{ 
    position:absolute; 
    z-index:1; 
    width:200px; 
    height:200px; 
    background: #1e5799; /* Old browsers */ 
    background: -moz-linear-gradient(left, #1e5799 0%, #ffffff 49%, #1e5799 100%); 
    background: -webkit-linear-gradient(left, #1e5799 0%,#ffffff 49%,#1e5799 100%); 
    background: linear-gradient(to right, #1e5799 0%,#ffffff 49%,#1e5799 100%); 
} 
#whitefade{ 
    display:block; 
    position:absolute; 
    z-index:2; 
    width:200px; 
    height:200px; 

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 

}