像css3中的Angle Gradient一样的Photoshop

Question

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

任何参考??

Answer 1

没有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);
}

问题似乎是颜色停止只能远离中心，而不是径向（如果这是有道理的）。无论如何，也许我的小提琴可能是一个开始：）