Question

我希望创建一个来自A - ＆gt;的渐变。 B - ＆gt; 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%);

}

如何在一个方向上创建从A到B到A的渐变，在另一个方向上创建从A到B的渐变？

1 个答案: