html - 如何创建一个渐变，在一个方向上从 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%);

}