问题
Is there a way to creat a gradient with a stop n pixels from the bottom edge of the element?
For example with Moz/Firefox it would look like:
-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)
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);
回答1:
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.)
回答2:
You could use -webkit-background-size to size the gradient in pixels and background-position to place it at the bottom.
回答3:
Not quite sure what you were after but I manage to stop a gradient in px by using this -
background-size:100% 31px; background-repeat:no-repeat;
回答4:
Have you tried something like this?
-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)
I hope that this site helps you more.
来源：https://stackoverflow.com/questions/4707828/css-3-gradient-n-pixels-from-bottom-webkit-safari