html - 如何使用 CSS 实现多重渐变

Question

我正在尝试在我的一个元素中使用多重渐变。我的目标是让 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 .

Answer 1

box-shadow 更适合您想要执行的操作。它比您的梯度方法更简单、更可预测且更整洁。

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

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

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