1

我努力为 HTML 中的正文内容制作边框。我用了：

-moz-border-image: url(/images/border.png) 20 repeat;
 -webkit-border-image: url(/images/border.png) 20 repeat;
 -o-border-image: url(/images/border.png) 20 repeat;
 border-image: url(/images/border.png) 20 repeat; 
 behavior: url(/css/PIE.htc);

...但是因为它不能在资源管理器甚至其他一些浏览器的旧版本中工作，所以我决定采用旧的方式来制作它。但是，我不知道该怎么做。我们在旧网页中使用了这样的表格：

<BODY leftmargin=0" topmargin=0" marginwidth=0" marginheight=0" class="content">
<TABLE align="center" width="880" cellpadding="0" cellspacing="0" border="0">
    <TR>
        <TD><IMG src="/images/b-01-tl.jpg" alt="" width="20" height="20" border="0"><BR>
        </TD>
        <TD background="../images/b-01-mt.jpg" width="100%" valign="bottom">
        </TD>
        <TD><IMG src="/images/b-01-tr.jpg" alt="" width="20" height="20" border="0"><BR>
        </TD>
    </TR>
    <TR>
        <TD background="../images/b-01-ml.jpg"><BR>
        </TD>
        <TD bgcolor="#000000" class="bg-w0">

..但现在我用 div 和 HTML5 创建了页面。任何人都可以提出如何围绕内容实施新边界的想法。我们有 8 张边框图片 - 左上、上线、右上、右线、右下、下线、左下和左线。我知道可以用 div 做到这一点，但是我没有找到任何教程如何做到这一点。等待任何帮助:) 如果您需要边框图片，请写信给我，我会上传

4

2 回答 2

2

所以你想用“老式的方式”来做，嗯，因为边框图像因为缺乏支持而让你失望？好吧，这或多或少是老式的方式：

<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr valign="top">
            <td class="upper-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td class="upper-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
            <td class="upper-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>    
        <tr valign="top">
            <td class="middle-left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td width="100%">
                <!-- content below -->

                <!-- content above -->
            </td>
            <td class="middle-right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>        
        <tr valign="top">
            <td class="lower-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td class="lower-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
            <td class="lower-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>        
    </tbody> 
</table>
</body>

和 CSS：

<style type="text/css">
body { padding: 0; margin: 0; }
table tbody tr td { background-repeat: repeat; background-position: 0 0; }

.upper-left {background-image: url(/images/b-01-tl.jpg);}
.upper-center {background-image: url(/images/b-01-mt.jpg);}
.upper-right {background-image: url(/images/b-01-tr.jpg);}

.middle-left {background-image: url(/images/b-01-ml.jpg);}
.middle-right {background-image: url(/images/b-01-ml.jpg);}

.lower-left {background-image: url(/images/b-01-bl.jpg);}
.lower-center {background-image: url(/images/b-01-mb.jpg);}
.lower-right {background-image: url(/images/b-01-bl.jpg);}
</style>

所以在桌子本身上，我们希望我们的边框图像彼此完美对齐，这就是我们需要的原因cellspacing="0" cellpadding="0" border="0"——你可能可以确保 padding 为 0 并且这些天边框折叠设置为折叠。这种表格可以像您需要的那样有弹性——它可以是全宽或窄至（在本例中）60 像素。请记住，宽度属性不会将“px”作为值的一部分。所以 100% 就是 100%，但 60px 只是 60。

在我们的中间列中，我们width="100%"为每个设置设置<td>以确保最后一列不会意外地变得太宽，我们迫使事物保持正确的宽度 - 这就是为什么我们还为单元格使用空白 gif 以便我们可以看到背景并获得合适的尺寸。在某些情况下，我们可能会使用&nbsp;它，但它们的大小可能无法预测 - 如果您希望这些边框只有 2 个像素高，那就有点冒险了。有一段时间，人们使用实际的 Netscape<spacer>标签，但效果并不好。

align="left" 和 align="right" 确实是出于习惯。如果不是在左右<img>标签中使用空白 gif，而是使用实际图像，那么您可以这样做。

在这个例子中，我实际上是使用 CSS 应用背景，嗯，我想不出过去 10 年制造的浏览器不会理解这一点，而且它更容易维护。我从不喜欢使用该background属性，而且我敢打赌，将来某天某些浏览器会取消对它的支持（如果他们还没有的话）。该解决方案以这种方式向后和向前看。那天我做了很多这种标记。

通常，当我们做这样的边框时，我们还会包含一个与边框有些匹配的背景颜色 - 我们会使用bgcolor属性来做到这一点，您可以将其放在<tr>指定一次，或放在整个表格上，然后在您需要的单元格。更少的标记总是更好，否则你会在文档中很好地搜索和替换。不幸的是，我无法使用旧迪斯尼乐园网站上的示例，但http://web.archive.org/web/199 ​​80709083315/http: //namco.com/ 有很多使用表格和间隔 gif 来，呃，启发你。

于 2012-07-10T13:14:46.413 回答
1

您的代码错误，您缺少''

-moz-border-image: url('/images/border.png') 20 repeat;
 -webkit-border-image: url('/images/border.png') 20 repeat;
 -o-border-image: url('/images/border.png') 20 repeat;
 border-image: url('/images/border.png') 20 repeat; 
 behavior: url('/css/PIE.htc');
于 2012-07-10T12:41:18.770 回答