Question

有没有办法在元素的下边缘创建一个带有 n 像素的渐变的渐变？

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

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

还应该注意的是，这个渐变有一个伴星渐变，可以在盒子的顶部做同样的事情。所以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);

Answer 1

使用当前的webkit语法无法做到这一点。不过好消息！将会有一个新的-webkit-linear-gradient属性（刚刚在webkit博客上公布），它基本上与-moz语法相匹配，并允许你这样做。这种语法应该成为明确的CSS3语法，因此您可以在某些时候完全删除-webkit和-moz。（旧的-webkit-gradient属性将继续无限期地工作，但不会受到青睐。）

Answer 2

您可以使用-webkit-background-size调整渐变的像素大小，使用background-position将其放在底部。

Answer 3

不太确定你在追求的是什么，但我设法通过使用这个 -

来停止px中的渐变

background-size:100% 31px; background-repeat:no-repeat;

Answer 4

你尝试过这样的事吗？

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

我希望this site可以为您提供更多帮助。

CSS 3 Gradient n像素从底部开始 - Webkit / Safari

4 个答案: