Question

首先想一想，请不要回答“使用border-radius + css3pie或jquery插件”：我知道还有其他方法可以用css3做到这一点，但我不介意。

这是我的全部代码：

.menu_books_top-bottom { width:171px; height:7px; background-color:#76614C; float:left;}
.menu_books_center { width:155px; background-color:#76614C; padding:10px 15px 10px 15px; float:left;}
.menu_books_top-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-left.png); float:left;}
.menu_books_top-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_top-right.png); float:left;}
.menu_books_bottom-right {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-right.png); float:left;}
.menu_books_bottom-left {width:7px; height:7px; background-image:url(../images/borders/menu_books_bottom-left.png); float:left;}

<div class="menu_books_top-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_top-right">&nbsp;</div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left">&nbsp;</div>
<div class="menu_books_top-bottom">&nbsp;</div>
<div class="menu_books_bottom-right">&nbsp;</div>

但正如你所看到的，它看起来并不那么好！还有其他方法可以做同样的事情吗？或者我可以更好地使用此代码（例如经典方法）吗？

Here你可以找到一个例子。（红色=带边框的图像）

Answer 1

你可以写下我以下所写的内容。这将避免分手。

<div class="content">
    <span class="menu_books_top-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_top-right">&nbsp;</span>                    
    <span class="menu_books_center">
        Main
    </span><!-- content here -->        
    <span class="menu_books_bottom-left">&nbsp;</span>
    <span class="menu_books_top-bottom">&nbsp;</span>
    <span class="menu_books_bottom-right">&nbsp;</span>
</div><!-- end of .content -->

Answer 2

考虑到I know you need IE6的支持，你所拥有的东西似乎是合理的。

我重组了它并稍微清理了一下。

请参阅： http://jsfiddle.net/5wzC2/

我还确保它在现代浏览器和IE6中看起来一样。

我将div更改为span s（如@SirB的答案）。
我删除了 ，并添加了line-height:0; font-size:0来修复IE6。
我添加了corner课程，以删除width:10px; height:10px; float:left的所有欺骗行为。
我从HTML中删除了一些短语menu_books的实例。
我将background-image更改为仅background，这在此处有效且稍短。

所以是的，只是一堆迂腐的变化。

Answer 3

你不需要上下潜水。你可以这样做的方法是创建4个图像，其中包含四个圆角。使它们比实际需要的大，并将它们与他们尊重的角落对齐。这不会给页面增加太多的重量（如果有的话），因为通常它们是两种颜色，你可以使用gif。


<div class="menu_books_top-left"> </div>
<div class="menu_books_top-right"> </div>                  
<div class="menu_books_center">
    Content
</div>
<div class="menu_books_bottom-left"> </div>
<div class="menu_books_bottom-right"> </div>

如何使用图像/边框更好地编码网格代码？

3 个答案: