0
我必须这样创建块：HTML - 创建块
alt text http://img689.imageshack.us/img689/5397/samplek.png
我怎样才能做到这一点使用CSS + HTML更快？
A
回答
5
您必须创建8个支持透明度的图像。
4图像的方面：上，左，右，下
4图像的角落
对于中间部分可以有一个div，并与这个背景色填充。
如果您正在谈论纯CSS方式，那么您需要知道它的当前状态不允许您以跨浏览器的方式既没有圆角也没有阴影。
当你有你的形象，你可以粘合在一起他们是这样的：
<div style="background: url('/topleft.png') no-repeat;">
<div style="background: url('/topright.png') right no-repeat;">
<div style="background: url('/bottomleft.png') bottom no-repeat;">
<div style="background: url('/bottomright.png') bottom right no-repeat;">
<div style="padding: 0 5px; background: url('/top.png') repeat-x;">
<div style="background: url('/bottom.png') bottom repeat-x;">
<div style="position:relative; left: -5px;
background: url('/left.png') repeat-y;">
<div style="position:relative; left: 10px;
background: url('/right.png') right repeat-y;">
<div style="position:relative; right: 5px;
background: #fff68f;">
We got it!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
附：是的，我知道这很疯狂。
P.S. ＃2：为了使其“快速”，您可以将它们组合在一些主图像中，并使用CSS sprites技术。但为了工作，你必须在图像之间留出足够的空白空间（阅读文章以理解为什么），否则这9个嵌套div可能会爆炸得更远。
+0
好的，谢谢你！好帖子。 – Ockonal 2009-12-03 10:09:15
+0
这是一些严重臃肿的代码。强制用户下载8倍的HTML以获得圆角的美感是可用性的憎恶。 – 2009-12-03 13:39:17
+0
是的，我同意。它大大扩展了页面大小，这不仅会降低可用性，还会产生搜索引擎优化的影响。但几乎没有任何简单的方法，至少不使用JavaScript。 – 2009-12-03 13:43:43
0
CSS3为您提供了一些不错的选择，但其中大部分都不支持跨浏览器（如-moz-border-radius属性）。
0
可能是这样的：
<div id="block"></div>
<style type="text/css">
#block{
background:transparent url(http://img689.imageshack.us/img689/5397/samplek.png) 0 0 no-repeat;
height:279px;
width:222px;
}
</style>
比快？ – 2009-12-03 09:31:41
这是一个twinkie？ – random 2009-12-03 09:32:32
就在快速的方式。我真的不想将我的图像分成8个图像。 – Ockonal 2009-12-03 09:44:37