CSS 3 从底部渐变 n 像素 - Webkit/Safari

有没有办法创建带有停止点的渐变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);

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