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

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为单位调整渐变大小并将其放在底部.