CSS 3梯度从底部n像素 - Webkit / Safari [英] CSS 3 Gradient n pixels from bottom - Webkit/Safari

问题描述

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

Is there a way to creat a gradient with a stop n pixels from the bottom edge of the element?

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

For example with Moz/Firefox it would look like:

-moz-线性渐变（中心底部，＃f00 2％，＃d00 31px）

还应注意，此渐变具有伴随渐变做同样的事情到最顶端的盒子。所以真的css看起来像这样的FF和我需要重现webkit：

It should also be noted that this gradient has a companion gradient to do the same thing to the very top of the box. So really the css looks like this for FF and i need to reproduce for 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-linear-gradient属性（刚刚在webkit博客上公布）基本上匹配-moz语法，并将允许您这样做。这个语法应该成为最终的CSS3语法，所以你可以在某个时候完全删除-webkit和-moz。 （旧的-webkit-gradient属性将继续无限期地工作，但不受欢迎。）

You can't do that with the current webkit syntax. Good news though! There will be a new -webkit-linear-gradient property (just announced on the webkit blog) that basically matches the -moz syntax and will allow you to do this. This syntax should become the definitive CSS3 syntax, so you'll be able to drop the -webkit and -moz entirely at some point. (The old -webkit-gradient property will continue to work indefinitely, but is not favored going forward.)

这篇关于CSS 3梯度从底部n像素 - Webkit / Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！