HTML设计中的非线性阴影

Question

我试图在下面的图片中创建一个更宽的阴影。它不一定是非常跨浏览器的，最近的Firefox和基于WebKit的浏览器将会很好。有没有人有如何做到这一点的好主意？

Answer 1

Photoshop或瘸子，其中U喜欢

Answer 2

我还没有尝试过这种方法，但CSS3包括边界图像属性，描述here。也许如果你开发了自己的阴影，你可能可以将它设置为边框（或者使用带有这种边框的包装元素）。

Answer 3

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

#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 4

我只是wrote about something similar。