做弯曲阴影的最佳方法答案

【问题标题】：Best way to do curved shadows做弯曲阴影的最佳方法
【发布时间】：2012-01-11 02:56:46
【问题描述】：

对于这样的事情：

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

也只有影子必须在 IE9、FF 和 Chrome 中工作

【问题讨论】：

你的意思是按钮上的水平渐变？
我认为他的意思是图像框下方的阴影。
nicolasgallagher.com/css-drop-shadows-without-images/demo
我不建议使用 CSS3（太多 - 几行 css 代码用于什么？）...不是现在。最简单的方法是创建一个好的旧 .png 图像
@roXon 实际上根本没有那么多代码行，请参阅我的答案。此外，它还节省了图像所需的额外 HTTP 请求。在我看来，更快的页面加载时间总是更好。

标签： html css slice

【解决方案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);
}

【讨论】：

+1 不错的演示 joshnh ...（在我上面的评论中，我只是考虑了代码可逆性，使用一些 css3 方法和连接仍然很难操作，或者我仍然不习惯） .无论如何，希望有朝一日浏览器最终会就 -browser- 细节相关的命名法达成一致，采用默认设置，让我们的生活更轻松。
拉德！我想不出如何用纯 CSS3 做到这一点。谢谢！
由于某种原因似乎无法使其正常工作。使用 z-index:-1;阴影落在背景后面。如果我将其更改为 0，我会看到阴影，但它们位于 div 的顶部。我正在试图弄清楚，但你能想到为什么会发生这种情况吗？
与z-index有关。它必须至少为 -1。尝试再次为背景设置较低的 z-index。如果还是有问题，能否贴出代码，或者jsFiddle？

【解决方案2】：

多个box-shadows

【讨论】：

【解决方案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 中。位于：http://awgwa.com。然后你必须将它放在带有渐变的按钮后面。

【讨论】：