-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
我上面有这段代码,我刚刚意识到这个渐变是从上到下的。有什么办法让它在 30px 后停止整个渐变。我可以根据需要进行调整,但是如何让渐变在 30 像素后自行完成?
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
我上面有这段代码,我刚刚意识到这个渐变是从上到下的。有什么办法让它在 30px 后停止整个渐变。我可以根据需要进行调整,但是如何让渐变在 30 像素后自行完成?
您可以background-size
一起使用该物业。
像这样:
div {
height: 100px;
width: 100px;
border: 1px solid black;
background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
background-size: auto 30px;
background-position: top;
}
<div></div>
在 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 的浏览器。
css3 渐变是背景图像,因此它们将填充块元素的整个高度和宽度,就像它是纯色一样。
为了限制渐变的高度,限制元素的高度。执行此操作的“干净”方法可能是使用伪元素。就像是...
div {height: 500px; width: 500px; position: relative}
div:before {
content: " ";
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
background-image: [your-gradient-here]
}
好吧,只要渐变的其余部分(在您设置的像素数之后)可以是固定颜色,只需使用如下三个颜色停止(例如停止在 30px - 注意最后一个条目与第二个相同):
background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);