有没有办法使用 CSS 创建软件框的背景阴影？答案

【问题标题】：Is there a way to create a software box's background shadow using CSS?有没有办法使用 CSS 创建软件框的背景阴影？
【发布时间】：2012-10-20 09:28:48
【问题描述】：

想象一个像下面这样的软件盒：

_{（来源：sitellite.org）}

现在想象阴影不存在。有没有一种 CSS 方法可以模拟该背景阴影，并且至少可以在 Firefox 和 Chrome 上工作，如果不是 IE9 及更高版本的话？

【问题讨论】：

使用转换后的渐变。（也就是说，使用transform: skew(...) 和background-image: linear-gradient(...)。）
也许与 CSS3 转换..
您正在使用图像作为盒子，那么为什么不使用图像作为阴影呢？
@enhzflep 这是因为我将其添加到 WordPress 主题中，并且我希望有人仅上传该框，然后我将其放置在蓝色背景上并为他们添加带有代码的阴影苍蝇。我不想让他们担心阴影。但是，我的代码可能会担心它并在图像后面使用图像，是的。
@Volomike - 啊哈.. 明白了。我可能倾向于研究动态生成阴影图像。以几乎相同的方式使用画布和一些 javascript 通常会使用。当然，这在某些浏览器上会失败，css3 转换也是如此。为了获得最佳兼容性，我会使用图像 + js。为了获得最佳外观，我会使用画布生成图像，然后再将其放到页面上。我倾向于认为 css 转换会错误地计算阴影（例如框的右上角），画布也会允许假透视效果。

标签： css background shadow

【解决方案1】：

一种方法是从这样的三角形开始

<div id="triangle"></div>

#triangle {
    width: 0;
    height: 0;
    border-top: 100px solid grey;
    border-left: 100px solid transparent;
    opacity:0.1;
}

see example

然后添加一个线性渐变并将其放置在图像后面。看看这个gradient generator 作为起点。

然后你可以使用transform 稍微倾斜它。

【讨论】：