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

首先想到的是，请不要回答“使用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你可以找到一个例子。（红色=带边框的图像）

来源

2011-05-14 kwichz

这将有助于如果你可以做一个[的jsfiddle测试用例（http://jsfiddle.net/）和[http://dummyimage.com/](http://更换相同尺寸的，图像dummyimage.com/）。 – thirtydot 2011-05-14 14:12:25

严正。不知道怎么办边防与虚拟图像:) – kwichz 2011-05-14 14:17:01

的例子已经加入:) – kwichz 2011-05-14 14:35:23

考虑到I know you need对IE6的支持，你看起来合理。

我对它进行了重新整理并进行了一些清理。

参见：http://jsfiddle.net/5wzC2/

我也确信它看起来在现代浏览器和IE6一样。

我将div s更改为span s（如@ SirB的回答）。
我删除了  s，并添加了line-height:0; font-size:0来修复IE6。
我添加了一个corner类删除的width:10px; height:10px; float:left所有的受骗者。
我从HTML中删除了短语menu_books的一些实例。
我改变background-image只是background，其作品在这里和略短。

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

来源

2011-05-14 15:23:53 thirtydot

谢谢！这看起来好一点:) – kwichz 2011-05-14 16:09:44

感谢您的留言！很高兴能帮助实现目标 – breezy 2011-05-14 16:12:12

你不需要上下潜水。你可以做到这一点的方式是创建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>

来源

2011-05-14 14:15:43 locrizak

我那么怎么办：=）是的，我需要因为图像边界是透明的，所以我会得到的背景该div容器:) – kwichz 2011-05-14 14:30:02

你可以写下来，比如我是如何在下面写的。这将避免有divitus。

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

来源

2011-05-14 15:08:31 breezy

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

回答

相关问题