HTML 设计中的非线性阴影

【问题标题】：Non-linear shadow in HTML designHTML 设计中的非线性阴影
【发布时间】：2021-04-30 22:55:48
【问题描述】：

我正在尝试创建一个顶部更宽的阴影，如下图所示。它不必非常跨浏览器，最近基于 Firefox 和 WebKit 的浏览器就可以了。有人对如何做到这一点有任何好的想法吗？

【问题讨论】：

标签： html canvas css

【解决方案1】：

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

【讨论】：

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

【讨论】：

【解决方案3】：

我只是wrote about something similar。

【讨论】：

【解决方案4】：

photoshop 或 gimp，你喜欢哪个

【讨论】：

他希望用 CSS 和 HTML5 来实现