径向渐变 CSS 原点在顶部，而不是在中心答案

【问题标题】：radial-gradient CSS origin on the top, not in the center径向渐变 CSS 原点在顶部，而不是在中心
【发布时间】：2014-09-17 14:45:45
【问题描述】：

我正在玩径向渐变，但无法达到我想要的效果。

我尝试使用colorzilla gradient generator，但它们始终将渐变居中。我已经尝试过自己的变换，但我不知道是否可以选择更改渐变的原点。我希望原点水平位于中间，但垂直位于顶部。

我尝试了以下方法但没有成功：

background: -webkit-radial-gradient(center, ellipse cover at 50% 0px, $center 0%,$outer 70%);
background: -webkit-radial-gradient(top center, ellipse cover, $center 0%,$outer 70%);

下面是我试图模仿的效果：

【问题讨论】：

你的意思是像this？我认为您的值的语法/顺序不正确。
@Harry 是的，像这样！你在哪里决定径向渐变的原点？我想了解径向渐变属性。
看看：developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient ♦ dev.w3.org/csswg/css-images-3/#radial-gradients
@DanielRamirez-Escudero：50% 0% 是以x-axis-pos y-axis-pos 格式指定的那个。 注意： 标准的radial-gradient 语法与-webkit- 有点不同。

标签： css sass gradient radial-gradients

【解决方案1】：

感谢哈利，我找到了答案。如果这对这里的任何人有帮助的话，就是我用来获得这种渐变效果的方法，它似乎适用于除 IE9 之外的所有浏览器，当然......

background: -webkit-gradient(radial, 50%, 0, color-stop(0%,#ffffff), color-stop(70%,#b7b7b7));

【讨论】：

【解决方案2】：

我给你举个简单的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Maciej Fraj">
        <style>
            html, body{
                width:100%;
                height:100%;
            }
            .example{
                display: block;
                width: 100%;
                height: 100%;
                background: #ffffff;
                background: radial-gradient(circle at center top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 55%, #f6f6f6 100%);
            }
        </style>
    </head>

    <body>
        <div class="example"></div>
    </body>
</html>

当您首先使用径向渐变时，您设置渐变形状 - 例如圆形，接下来是位置 - 中心顶部，最后设置颜色。您可以使用此示例并对其进行更改，当然您必须为所有浏览器编写缺少的语法。

【讨论】：