你可以用CSS创建一个三维凸起的盒子吗？还是你需要使用图片？

我想在我的网站上创建一个小小的3d“面板”或“框”。我发现了一个类似的例子on this page，他们在这个页面上显示窗口，这些窗口通过标题框从页面“引发”。在这种情况下，他们使用整个盒子的图像，而中间的文字是页面上的实际文字。你可以用CSS创建一个三维凸起的盒子吗？还是你需要使用图片？

我想看看这是否可以使用CSS复制，或者我应该真的转移到Photoshop这种事情，并做所有的图像。（如果我必须）

没有人有任何建议，如果这可以复制使用纯HTML和CSS，JavaScript。

作为第二个问题，如果必须使用Photoshop和图像来完成，那么有没有什么好的地方可以获得photoshop“模板”，您不必从头开始组装它。

enter image description here

来源

2011-06-03 leora

这里的相似使用CSS3的花哨东西的部分：在“所有浏览器”

http://jsfiddle.net/RrfJb/（在WebKit浏览器视图例如Chrome）

可以做的工作。

对于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>

来源

2011-06-03 10:21:39 thirtydot

谢谢。。当你说它可以在“所有浏览器”中工作时，这是否意味着上述代码仅适用于某些浏览器。。我不幸需要支持一切作为一个要求（包括IE6 :(） – leora 2011-06-03 10:25:35

我从字面上只是更新了我的答案，包括如何使其在IE6中工作的指针 – thirtydot 2011-06-03 10:26:17

什么是您的“所有浏览器”/“一切”的确切定义？ – thirtydot 2011-06-03 10:30:01

你可以做很多与CSS3包括旋转，坡度和不同的字体。缺点是，除了字体嵌入之外，没有任何复杂性的IE在IE中工作。

你不能真正做不规则的位图图像像纸皱巴巴，所以你需要一个图像。

现在，我想说，除非所有数据都来自CMS，否则最好的方法是为此使用图像，并可能在底部为名称嵌入字体。

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

来源

2011-06-03 10:10:31

当使用CSS3，你总是要注意，使用旧浏览器的人可能无法看到你想要的东西。逐步使用它是最好的方法。查看this文章。在这种特殊情况下，CC3可以添加阴影。因此，如果您使用旧版浏览器的用户无法看到盒子阴影，请使用CSS3。否则使用图像。

来源

2011-06-03 10:26:26

你可以用CSS创建一个三维凸起的盒子吗？还是你需要使用图片？

回答

相关问题