3

像有角度的css3渐变背景这样的Photoshop背后的想法是什么......

有角度的渐变 BG

有参考吗？？

4

1 回答 1

5

没有 css3 效果可以做到这一点。您可以从两种或多种颜色制作渐变，但不能调整角度。

如果你用两个/四个堆叠的盒子制作背景，顶部的一个从暗到中等，底部的一个从中等到亮，这是可以实现的。

编辑：这个页面很好地解释了径向： http ://www.impressivewebs.com/css3-radial-gradient-syntax/

编辑2：我在小提琴中尝试了我的理论，我认为我之前的陈述是错误的——不能按照我建议的方式完成。这是我最接近的：http: //jsfiddle.net/drPMj/4/

.topbox1 {
    background-image: -moz-radial-gradient(200px 150px, #777 50%, #ccc);
    background-image: -webkit-radial-gradient(200px 150px, #777 50%, #ccc); 
}
.topbox2 {
    background-image: -moz-radial-gradient(0 150px, ellipse cover, #777, #ccc);
    background-image: -webkit-radial-gradient(0 150px, ellipse cover, #777, #ccc);
}
.bottombox1 {
    clear:left;
    background-image: -moz-radial-gradient(200px 0, ellipse cover, #777, #ccc);
    background-image: -webkit-radial-gradient(200px 0, ellipse cover, #777, #ccc);
}
.bottombox2 {
    background-image: -moz-radial-gradient(0 0, ellipse cover, #777, #ccc);
    background-image: -webkit-radial-gradient(0 0, ellipse cover, #777, #ccc);
}

问题似乎是颜色停止只在远离中心的地方起作用，而不是沿着径向（如果有意义的话）。无论如何，也许我的小提琴可以成为一个开始:)

于 2013-09-04T09:34:21.613 回答