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

请注意，将其更改为 rgba(255, 255, 255, 0) 与将其更改为 rgba(0, 0, 255, 0) 可能会产生不同的结果> 在某些浏览器中，例如 Firefox。这可能是由于 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>