像有角度的css3渐变背景这样的Photoshop背后的想法是什么......
有参考吗??
没有 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);
}
问题似乎是颜色停止只在远离中心的地方起作用,而不是沿着径向(如果有意义的话)。无论如何,也许我的小提琴可以成为一个开始:)