如此多的像素后如何使css渐变停止？

Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

我上面有这个代码,我才意识到这个渐变从上到下.有没有办法让它在30px之后停止整个渐变.我可以根据需要进行调整,但是如何在30px之后让梯度完成？

Answer 1

您可以一起使用background-size属性.

像这样:

    
    div {
        height:100px;
        background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
        background-size:auto 30px;
    }
    

Answer 2

在CSS3中:

radial-gradient(ellipse at center center, 
  rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
  rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%) 

您可以在渐变中设置多个停靠点.您还可以指定长度(以像素为单位)而不是百分比.您还可以使用rgba来制作透明色.

你从第一个颜色开始,中心为0%.
然后你有第二个颜色在x像素(我在这里使用x = 100像素).
然后你去x + 1像素的透明白色.
并一直保持透明,直到100%.

这应该适用于支持CSS3的浏览器.