如何创建一个渐变，从一个方向从 A 到 B 到 A，从另一个方向从 A 到 B？答案

【问题标题】：How do I create a gradient that goes form A to B to A in one direction and A to B in another direction?如何创建一个渐变，从一个方向从 A 到 B 到 A，从另一个方向从 A 到 B？
【发布时间】：2017-04-25 22:45:45
【问题描述】：

我希望创建一个渐变，该渐变从 A --> B --> A 沿正 X 方向，同时从 A --> B 沿负 Y 方向。基本上它应该是左侧的一种颜色，然后褪色为白色，然后返回第一种颜色，但底部应全部褪色为白色。我一直在尝试使用 CSS 来做到这一点，但我不确定这是否可行，并且对其他选项持开放态度

【问题讨论】：

我不明白。能画个图什么的吗？

标签： html css linear-gradients

【解决方案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%);

}

【讨论】：

漂亮！谢谢
是否可以创建相同的效果，但不是在底部淡入白色淡入透明？
不是这样，如果不是太大，我会使用带有透明 png 的背景图像。