6

有没有办法从元素的底部边缘创建一个停止n像素的渐变？

例如，对于 Moz/Firefox，它看起来像：

-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)

还应该注意的是，这个渐变有一个伴随渐变来对盒子的最顶部做同样的事情。所以对于 FF，css 看起来像这样，我需要为 webkit 重现：

background-image:
      -moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px), 
      -moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px);
4

4 回答 4

5

你不能用当前的 webkit 语法来做到这一点。不过好消息！将有一个新的 -webkit-linear-gradient 属性（刚刚在 webkit 博客上宣布），它基本上与 -moz 语法匹配，并允许您执行此操作。这种语法应该成为最终的 CSS3 语法，因此您可以在某个时候完全删除 -webkit 和 -moz。（旧的 -webkit-gradient 属性将继续无限期地工作，但不受欢迎。）

于 2011-01-17T05:46:22.850 回答
5

您可以使用-webkit-background-size以像素为单位调整渐变大小并将background-position其放置在底部。

于 2011-01-17T19:36:51.437 回答
4

不太确定你在追求什么，但我设法通过使用这个来停止 px 中的渐变 -

background-size:100% 31px; background-repeat:no-repeat;
于 2012-08-16T15:50:44.467 回答
0

你有没有尝试过这样的事情？

-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)

我希望这个网站对你有更多帮助。

于 2011-01-16T20:41:44.750 回答