html - 如何让 css 渐变在这么多像素后停止？

Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

我上面有这段代码，我刚刚意识到这个渐变是从上到下的。有什么办法让它在 30px 后停止整个渐变。我可以根据需要进行调整，但是如何让渐变在 30 像素后自行完成？

Answer 1

您可以一起使用 background-size 属性。

像这样:

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;

    background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
    background-size: auto 30px;
    background-position: top;
}

<div></div>