在 HTML 中实现圆角

3

我有一段代码,当它显示时,右侧会有一个奇怪的垂直线。我无法确定是什么原因导致的。希望能得到帮助。

enter image description here

这是我正在使用的完整代码。

<html>
<head></head>
<body>

<table border="0" width="600" align="center" cellpadding="0" cellspacing="0" title="Join us!">
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15"><img src="topleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: .2em">&nbsp;</td>
<td width="15"><img src="righttop.jpg" width="15" height="15" alt=""></td>
</tr>

<tr bgcolor="#8cc63f">
<td width="15" style="font-size: 1px">&nbsp;</td>
<td width="410" bgcolor="#8cc63f" align="center" style="color: white; font-size: 16px">
<span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;">
    <a href="http://www.google.com"><br> We have spacious and modern training rooms. <br><br></span></td>
<td width="15" style="font-size: 1px;">&nbsp;</td>

</tr>
<tr bgcolor="#8cc63f" style="line-height: 0px">
<td width="15" height="15"><img src="buttomleft.jpg" width="15" height="15" alt=""></td>
<td width="410" style="font-size: 0px;" height="15"></td>

<td width="15" height="15"><img src="buttomright.jpg" width="15" height="15" alt=""></td></tr>
</table>
</body>
</html>

那么你是使用图像来实现圆角外观的吗? - Abe Miessler
是的。如果你知道解决方案或更好的方法,请告诉我。 - Helen Neely
1
http://css3generator.com/ > 边框半径 - Im0rtality
1
这是您的td背景颜色。您正在使用图像来创建圆角,但图像的宽度小于您的td的宽度。 - Matt K
如果您想确保在所有浏览器中兼容性,那么将图像作为背景图像仍然是唯一的方法。我会在CSS中设置背景图像而不是在DOM中设置。这将确保您在IE6+中拥有圆角。 - Ali
3个回答

3
您可能希望在不必输入大量代码的情况下使用CSS3圆角。只需尝试在Google上进行搜索!

2
这是由于您的宽度不正确导致的。
更改为:
``` ```

http://jsfiddle.net/GuuLs/
如果您希望宽度为600像素,则需要修改中间的 `td` 的宽度(目前为410)为570。示例链接(不包括角落图形):

2
中间的单元格应该是570宽度,这将解决问题。但我不会以这种方式解决这个问题。相反,我会使用CSS将背景图像设置为“顶部右侧,底部右侧,顶部左侧,底部左侧”。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接