你可以使用CSS创建一个3d凸起的盒子，还是需要使用图像？

Question

我正在尝试在我的网站上创建一个小的3d凸起的“面板”或“盒子”。我找到了一个类似的例子on this page，他们在这个页面上有一些窗口，这些窗口在页面上被“抬起”，带有一个标题框。在这种情况下，他们正在使用整个框的图像，而中间的文本只是页面上的实际文本。

我想知道是否可以使用CSS复制这些内容，或者我应该真的转移到photoshop这样的事情并将其作为图像来完成。 （如果必须的话）

有没有人有任何关于是否可以使用纯html和css，javascript复制的建议。

作为第二个问题，如果必须使用photoshop和图像完成，那么有任何好的地方可以获得photoshop“模板”，你不必从头开始将它们放在一起。

Answer 1

这里有类似的东西，使用CSS3的花哨部分：

http://jsfiddle.net/RrfJb/ （在Chrome等WebKit浏览器中查看）

可以在“所有浏览器”中使用。

• 对于Firefox，它就像添加-moz前缀版本一样简单。
• 对于IE，使用CSS3 PIE表示渐变和方框阴影，使用this tool生成transform CSS。

---

.box {
    width: 300px;
    position: relative;
    background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
    box-shadow: 3px 3px 5px #666;
    padding: 12px
}
.box > h2 {
    background: #ccc;
    float: left;
    padding: 8px 16px;
    position: relative;
    top: -18px;
    left: -21px;
    -webkit-transform: rotate(-2deg);
    font: bold 18px sans-serif
}
.box > p {
    clear: both
}
<div class="box">
    <h2>Welcome to website!</h2>
    <p>Lorem ipsum dolor sit amet..</p>
</div>

Answer 2

你可以用CSS3做很多事情，包括旋转，渐变和不同的字体。缺点是，除了字体嵌入之外，它没有一个在IE中工作而没有各种复杂性。

你不能像纸张那样做不规则的位图图形，所以你需要一个图像。

现在，我要说除非所有数据都来自CMS，否则最好的方法是使用图像，并在底部嵌入一个字体。

第二种最好的方法是使用纸张图像，然后使用CSS3。看看http://css3please.com/，看看各个属性的好地方。

Answer 3

使用CSS3时，您必须要注意使用旧浏览器的人可能无法看到您的意图。逐步使用它是最好的方法。查看this文章。 在这种特殊情况下，CC3可以添加阴影。因此，如果您使用旧浏览器的人无法看到框阴影，那么请使用CSS3。否则使用图像。