CSS3中类似于Photoshop的角度渐变

Question

一个像Photoshop那样的倾斜CSS3渐变背景背后的理念是什么...

有参考资料吗？

- SaurabhLP

---

Amazinghttp://css-tricks.com/conical-gradients-css/ - Herrington Darkholme

Answer 1

没有CSS3效果可以做到这一点。你可以从两个或更多颜色中制作渐变，但无法角度化。

不过，如果你将背景从两个/四个堆叠的框中制作，顶部为深色到中等色，底部为中等色到浅色，则可以实现。

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

编辑2： 我在fiddle中尝试了我的理论，我认为我之前的陈述是错误的 - 不能以我建议的方式完成。这是我最接近的结果： 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);
}

问题似乎在于color-stop仅在远离中心的位置起作用，而不是沿半径方向（如果这样说有意义的话）。无论如何，也许我的小demo可以作为一个开始 :)

- labtoy