Question

我有一个完全有效的（judging by the look）径向渐变：

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

我没有问题，直到我发现all these prefixes are not needed for a gradient.。删除它们实际上会删除相应浏览器中的渐变。看起来问题是css gradient还有另一种（更新的）语法。

问题在于如果将我的背景改为：

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

这看起来就像删除.square上的第一个背景。怎么能改变呢？

Answer 1

您的错误是将#fff指定为色标。这会产生一个坚实的白色停止，而不是透明的。我所知道的新旧径向渐变语法没有其他跨浏览器问题。

请注意，将其更改为rgba(255, 255, 255, 0)可能会产生与在某些浏览器（如Firefox）中将其更改为rgba(0, 0, 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)以保持一致性，但这并非绝对必要。）

.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

因为你使用这个，所以

的结果看起来不同背景：径向渐变（圆圈50％50％，＃00f 0％，＃ff 100％）;

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

Css径向渐变，新语法

2 个答案: