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，然后結果與您所需的相同