CSS径向渐变，新语法

Question

我有一个完全有效的（ 从外观来看 ）径向渐变：

 .square { background-color: #f0d9b5; color: #b58863; width: 80px; height: 80px; float: left; position: relative; } .grad:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00f; background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); } 

 <div class="square grad"></div> 

我对此没有任何问题，直到我发现渐变不需要所有这些前缀。 。 删除它们实际上会删除相应浏览器中的渐变。 看来问题在于， css梯度还有另一种（较新的）语法。

问题是，如果将我的背景更改为：

background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%); 结果看起来不同：

 .square { background-color: #f0d9b5; color: #b58863; width: 80px; height: 80px; float: left; position: relative; } .grad-first:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00f; background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); } .grad-second:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00f; background: radial-gradient(circle at 50% 50% , #00f 0%, #fff 100%); } 

 <div class="square grad-first"></div> <div class="square grad-second"></div> 

看起来它正在删除我在.square上的第一个背景。 如何更改？

Answer 1

您的错误是将#fff指定为色标。 这将创建纯白色的色标，而不是透明的色标。 我知道，新旧径向渐变语法没有其他跨浏览器问题。

请注意，将其更改为rgba(255, 255, 255, 0) rgba(0, 0, 255, 0)在Firefox之类的浏览器中将其更改为rgba(0, 0, 255, 0) rgba(255, 255, 255, 0)可能会有不同的结果。 这可能是由于Firefox如何根据其RGB值对透明色标进行插值。 使用rgba(0, 0, 255, 0) （透明蓝色），以便在所有浏览器中获得一致的结果：

background: radial-gradient(circle at 50% 50% , #00f 0%, rgba(0, 0, 255, 0) 100%);

（如果您愿意，也可以将#00f更改为rgba(0, 0, 255, 1) #00f rgba(0, 0, 255, 1)以保持一致性，但这不是绝对必要的。）

 .square { background-color: #f0d9b5; color: #b58863; width: 80px; height: 80px; float: left; position: relative; } .grad-first:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00f; background: -webkit-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); background: -ms-radial-gradient(center center,circle cover,rgba(0,0,255,1),rgba(255,255,255,0)100%); } .grad-second:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00f; background: radial-gradient(circle at 50% 50% , #00f 0%, rgba(0, 0, 255, 0) 100%); } 

 <div class="square grad-first"></div> <div class="square grad-second"></div> 

Answer 2

当然，结果的使用会有所不同，因为您使用了以下背景：radial-gradient（半径为50％50％，＃00f 0％，#fff 100％的圆圈）；

使用使用＃00F和#FFF两种颜色。 由于#FFF颜色，结果看起来不同，所以使用＃f0d9b5而不是#FFF，然后结果与您所需的相同