CSS - 左上角背景图像（弯曲）

Question

我目前正在制作一个网站here。右边是邮政编码搜索div。它的上角需要四舍五入。

我正在使用图像来绕过角落。我不想使用其他方法，除非它完全支持所有浏览器，直到IE7。

我已经在导航中执行了此操作（左侧仅限右上角和左下角）。但我似乎无法让它在左上角工作。请帮忙。这可能是我犯下的一个愚蠢的错误。

Answer 1

如果“邮政编码搜索div”是固定的width和height（看起来像是），最简单的解决方案就是将整个事物作为图像进行处理，并将其设置为background：

（是的，图像尺寸和颜色正确）

Answer 2

问题是您的背景颜色覆盖了您的图像。如果删除background-color属性，您将看到角落图像。

拍摄您的图像http://molossi.psm2.co.uk/assets/images/li-bg-tl.png并添加灰色背景。将整个灰色背景元素的宽度和高度设置为225x120或任何你想要的，你会很高兴。基本上从它只是角落图像片段移动到完整图像。

如果您不想这样做，请拍摄角落图像，使其长度为225像素，灰色一直向外延伸。

Answer 3

有两种方法可以在不使用border-radius（CSS3）且不使用图像的情况下创建圆角：

1. 使用div的四个小height: 1px个，逐渐增加宽度，从而产生圆角错觉。这可能是更好的选择。有关代码示例，请参阅以下站点： http://webdesign.about.com/od/css/a/aa072406.htm

2. 使用HTA文件和浏览器黑客。我个人从未尝试过这个。有关代码示例和技术，请参阅以下站点 http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Answer 4

对于较旧的浏览器支持，使用图像是最好的，也许是唯一的选择。如果您不介意较低级别的浏览器支持CSS3 Rounded Corners（在W3Schools的CSS3 Boarders页面中）可能有您的答案。

我希望这会有所帮助。