html - 如何使多个渐变与CSS一起使用

我正在尝试在我的一个项目中使用多个渐变。我的目标是要使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%);
}

但是问题在于这仅显示第一个渐变，随后的一次被忽略。

您可以在操作here中看到它。

最佳答案

box-shadow更适合您要执行的操作。它比渐变方法更简单，更可预测且更整洁。

它所需要的只是一个属性。玩这些值以获得最佳效果（请仔细阅读这些内容，以免出现盲目的玩法）。这就是我所做的，可以达到与您的渐变相似的效果：

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

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