0

我正在尝试在我的一个项目中使用多个渐变。section我的目标是从元素的边界产生一个渐隐的阴影。

从不同的来源这是我到现在为止的想法

.section2 {
    border-radius: 10px;
    border: 2px solid #E1E1E1;

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%), -moz-linear-gradient(left, #E1E1E1 0%, #FFFFFF 5%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left, right bottom, color-stop(0, #E1E1E1), color-stop(.05, #FFFFFF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(right, #FFFFFF 95%, #E1E1E1 100%), -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
}

但问题是这仅显示第一个梯度，随后的一次被忽略。

您可以在这里看到这一点。

4

3 回答 3

1

box-shadow更适合您想要做的事情。它比渐变方法更简单、更可预测和更整洁。

它只需要一个属性；使用这些值来获得最好的结果（阅读它们的作用，这样你就不会盲目地玩）。这就是我所做的，它达到了与你的渐变类似的效果：

box-shadow: inset 0 0 30px 10px #E1E1E1;

演示：http: //jsfiddle.net/EDcGP/6/

于 2012-06-08T13:35:28.723 回答
0 
/* Mozilla Firefox */
    background-image: -moz-linear-gradient(left, #FF0000 95%, #E1E1E1 100%);
/* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);

在 Firefox 和 Chrome 中尝试了上述 css，两者都有效。无法在 Safari 中尝试。

您必须删除第二个渐变样式。有一个渐变就可以了。

于 2012-06-06T03:31:18.773 回答
0

通过使用不透明度和下面给出的背景颜色，我几乎已经解决了。

background-image: -moz-linear-gradient(to right, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to left, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to bottom, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to top, #E1E1E1 0, rgba(255, 255, 255, 0) 50px);

可以在此处找到工作示例。

于 2012-06-07T10:36:28.453 回答