做弯曲阴影的最佳方法

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 s

Answer 3

如果你的意思是渐变：

background: -webkit-gradient(linear, top, bottom, from(#73B2F7), to(#6396D6));

background: -moz-linear-gradient(top, #73B2F7, #6396D6);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73B2F7', endColorstr='#6396D6');

如果你的意思是影子，我写了一个python脚本来创建一系列div id，其宽度与在角落中创建半圆所需的宽度相匹配，并将它们居中在文本上方和下方的容器div中。 Smaple at：http://awgwa.com。然后你必须使用渐变将它放在按钮后面。