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