做弯曲阴影的最佳方法

Question

对于这样的事情:

最有效的方法是什么？最好做一个图像,或者有没有办法用CSS实现这一点而没有一堆我不知道的黑客/额外标记？

此外阴影只具有在IE9,FF和Chrome工作

Answer 1

您可以使用伪元素和box-shadow属性来执行此操作.我在这里为你做了一个例子:http://jsfiddle.net/joshnh/NWnXw/

这适用于IE9及以上版本.

/* Shadow */

.shadow {
    box-shadow: 0 1px 5px hsla(0,0%,0%,.25),
                inset 0 0 50px hsla(0,0%,0%,.05);
    position: relative;
}
.shadow:after,
.shadow:before {
    bottom: 7px;
    box-shadow: 0 10px 15px hsla(0,0%,0%,.25);
    content: '';
    height: 50%;
    left: 7px;
    max-width: 300px;
    position: absolute;
    right: 7px;
    z-index: -1;
    -webkit-transform: skew(-15deg) rotate(-8deg);
       -moz-transform: skew(-15deg) rotate(-6deg);
        -ms-transform: skew(-15deg) rotate(-6deg);
         -o-transform: skew(-15deg) rotate(-6deg);
            transform: skew(-15deg) rotate(-6deg);
}
.shadow:after {
    -webkit-transform: skew(15deg) rotate(8deg);
       -moz-transform: skew(15deg) rotate(6deg);
        -ms-transform: skew(15deg) rotate(6deg);
         -o-transform: skew(15deg) rotate(6deg);
            transform: skew(15deg) rotate(6deg);
}

Answer 2

多个box-shadow小号