Css径向渐变，新语法

Question

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

.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>

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

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

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 指定为色标。这会创建一个纯白色的色标，而不是一个透明的色标。据我所知，新旧径向渐变语法没有其他跨浏览器问题。

请注意，在某些浏览器（如 Firefox）中，将其更改为 rgba(255, 255, 255, 0) 可能会产生与将其更改为 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%，#fff 100%）；

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