Question

我需要在一个有圆角的区域内显示一些内容。与这些角相关联的图像位于单个.png文件中。为了显示圆角，我使用以下内容：

<table border="0" cellpadding="0" cellspacing="0" style="width:800px;">
  <tr>
    <td style="height:12px; width:12px;background-image:url(/images.png);background-position:108px 48px;">&nbsp;</td>
    <td style="background-color:silver;">&nbsp;</td>
    <td style="height:12px; width:12px;background-image:url(/images.png);background-position:124px 48px;">&nbsp;</td>
  </tr>

  <tr>
    <td style="background-color:silver;">&nbsp;</td>
    <td>My content goes here.</td>
    <td style="background-color:silver;">&nbsp;</td>
  </tr>
</table>

奇怪的是，我的上角和内容之间有一条细线。但是，这条线不会出现在中间列之间。起初我以为我错误地调整了我的图像，但它们看起来很好。有没有人对我做错了什么或如何解决这个问题有任何想法？

谢谢！

Answer 1

有没有人对什么有任何想法我做错了？

使用表格进行布局。
使用基于图像的技术进行圆角处理。
使用内嵌样式（除非您在提问时使用它们纯粹是为了简洁）。

我该如何解决这个问题？

使用此HTML：
```
<div id="content"></div>
```

使用此CSS：

width: 800px;
-moz-border-radius: 20px;
border-radius: 20px;

我们正在使用CSS3属性border-radius，它可以在IE9和其他现代浏览器中使用。

如果在旧版Internet Explorer中需要圆角，则应使用CSS3PIE。

就像下载文件一样简单，只需在CSS中添加一行：

#myElement {
    ...
    behavior: url(PIE.htc);
}

Live Demo （没有CSS3PIE）

使用CSS的圆角创建一条线

1 个答案: