是否可以为单个背景提供线性和径向渐变？

Question

我想给单个控件提供线性和径向渐变.是否可以将这两者结合起来.？

Answer 1

我使用enjoycss来组合渐变和其他复杂的CSS

它自动生成CSS,

你只需要使用控件,就像在photoshop中一样

http://enjoycss.com/6y/2#background

这是生成的代码

background: -webkit-linear-gradient( -225deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -webkit-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: -moz-linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -moz-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);

Answer 2

您不能在同一个元素上放置两个渐变。但如果您使用 css 渐变，浏览器必须兼容 css3。您可以使用 :before 和 :after 伪类来拥有两个不同的 css 选择器。

尝试这个 ：

div {
    position: relative;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(linear, 0 0, 0 500, from(rgba(220,30,50,1)), to(rgba(10,150,20,1)));
}
div:after {
    content : ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(65,100,220,.5)), to(rgba(240,200,90,.5)));
}

编辑：
多个背景是 IE 9+
伪元素之后是 IE 8+