具有宽度约束的径向 CSS 渐变？答案

【问题标题】：Radial CSS gradient with width constraints?具有宽度约束的径向 CSS 渐变？
【发布时间】：2010-12-22 21:46:02
【问题描述】：

这是我尝试使用 CSS 渐变构建的按钮渐变：

这通常很容易做到，但正如您所见，顶部的渐变看起来更像是一个大的径向渐变，因为它在中间稍微下降了一点，并没有一直延伸到边缘。

那么，有什么想法可以用 CSS 来实现吗？

【问题讨论】：

标签： css gradient

【解决方案1】：

在 css 中，径向背景中心不能位于其容器之外，但您可以通过使用渐变定位子元素来偏移径向背景。基本上你正在寻找这样的事情：

这接近于 simshaun 的出色解决方案。但是，因为我喜欢挑战，所以我想尝试零额外标记的东西，我想出了这个：

http://jsfiddle.net/xB4DU/

这与您的解决方案非常接近，且额外加价为零。它只是一个带有嵌入阴影的线性渐变，可减弱按钮的左右边缘。

【讨论】：

【解决方案2】：

这肯定需要一些调整才能使其在不同的浏览器中看起来正确（我还没有真正做过）：

CSS

.upgrade {
    background: #FF3397;
    color: #FFF;
    float: left;
    height: 30px;
    line-height: 30px;
    position: relative;
    text-align: center;
    width: 160px;

    -webkit-box-shadow:  0px 0px 3px #999;
    -moz-box-shadow:  0px 0px 3px #999;
    box-shadow:  0px 0px 3px #999;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 1px -1px 3px #E60071;
    filter: dropshadow(color=#666, offx=2, offy=-2);

    font-family: Verdana, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
}

.upgrade span {
    background-image: -moz-radial-gradient(50% 50% 90deg,ellipse contain, #FFFFFF, rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(radial, 50% -50%, 51, 50% 0, 110, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
    display: block;
    height: 100px;
    left: -50px;
    position: absolute;
    top: -70px;
    width: 260px;
    z-index: 1;
}
.upgrade div {
    z-index 2;
}

HTML

&lt;div class="upgrade"&gt;&lt;span&gt;&lt;/span&gt;&lt;div&gt;Upgrade for more&lt;/div&gt;&lt;/div&gt;

http://jsfiddle.net/AvkTH/3/

【讨论】：

【解决方案3】：

不是一个完整的答案，但这可能很有用。

http://css-tricks.com/css3-gradients/

克里斯在这里举了一个例子：

http://css-tricks.com/examples/CSS3Gradient/

带有径向渐变。这是使用 CSS3 和旧浏览器可能不支持的特定于浏览器的实现。

否则，我不知道如何在不使用图像的情况下实现这一目标。

希望这会有所帮助。

鲍勃

【讨论】：

如果你决定走这条路。我刚刚发现这个很酷的工具可以尝试各种径向渐变选项。 westciv.com/tools/radialgradients/index.html

【解决方案4】：

只是为了好玩，我把它放在一起，但谁知道它会在 chrome 之外做什么。我以前从来没有玩过径向渐变，但这很有趣——我想我的（可怕的）css 可能会对你的项目有所启发。

CSS：

#button {
display: table;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 50px auto;
padding: 10px;
background: 
    -webkit-gradient(radial, 50% -200%, 180, 50% -110%, 35, from(#f81499), to(#fff), color-stop(.7,#f81499));
color: #fff;
text-shadow: 0px -1px 0 rgba(0,0,0,.25);
font-family: "droid sans", sans-serif;
font-size: 13px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.25);

}

HTML：

<html>
 <head>
  <title></title>
  <link type="text/css" href="test.css" rel="stylesheet" />
 </head>
 <body>
  <div id="button">Upgrade for more</div>
 </body>
</html>

【讨论】：