如何使用CSS创建软件盒子的背景阴影？

Question

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

_{(来源：sitellite.org)}

现在想象一下，如果没有阴影，是否有CSS方法可以模拟背景阴影，并在至少Firefox和Chrome上工作，如果可能还包括IE9及以上版本？

- Volomike

---

使用转换渐变（transform: skew(...) 和 background-image: linear-gradient(...)）来实现。 - BoltClock

也许可以使用CSS3变换.. - intelis

你正在为盒子使用图像，那么为什么不也为阴影使用图像呢？ - enhzflep

@enhzflep 这是因为我要将它添加到一个WordPress主题中，我希望有人只上传框，然后我会为他们放置在蓝色背景上，并通过代码实时添加阴影。我不想让他们担心阴影的问题。但是，我的代码可以处理它并在图像后面使用图像，是的。 - Volomike

@Volomike - 哈哈..明白了。我可能会倾向于动态生成阴影图像。使用画布和一些JavaScript，通常可以像使用<插入所选的图像编辑套件>一样使用。当然，这在某些浏览器上会失败，就像CSS3变换一样。为了获得最佳兼容性，我会使用图像+js。为了获得最佳外观，我会使用画布在将其放到页面之前生成图像。我倾向于认为CSS变换会计算阴影不正确（例如，框的右上角），而画布则允许模拟透视效果。 - enhzflep

Answer 1

一种方法是从如下三角形形状开始：

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

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

查看示例

接着添加一个线性渐变并将其放置在图像后面。可以使用渐变生成器作为起点。

然后，您可以使用transform来轻微地扭曲它。

- cih