HTML设计中的非线性阴影

Question

我正在尝试创建一个顶部较宽的阴影，如下图所示。它不一定非常跨浏览器，最近基于Firefox和WebKit的浏览器会做得很好。有没有人对如何做到这一点有任何好的想法？

Answer 1

我还没有尝试过这种技术，但CSS3包含了border-image属性，如here所述。也许如果你开发了自己的阴影，你可以将它设置为边框（或使用带有这种边框的包装元素）。

Answer 2

您可能想尝试摆弄box-shadow和转换属性skew function。也许在内容元素下放置一个带box-shadow的透明div，例如：

#shadow{
    -webkit-transform: skewY(-10deg);
       -moz-transform: skewY(-10deg);
         -o-transform: skewY(-10deg);
            transform: skewY(-10deg);
    -webkit-box-shadow: 4px;
       -moz-box-shadow: 4px;
         -o-box-shadow: 4px;
            box-shadow: 4px;    
}

Answer 3

我只是wrote about something similar。

Answer 4

photoshop或gimp，你喜欢