CSS - 左上角背景图片（弯曲）答案

【问题标题】：CSS - Top left corner background image (curved)CSS - 左上角背景图片（弯曲）
【发布时间】：2011-06-10 17:23:41
【问题描述】：

我目前正在制作一个网站here。右侧是邮政编码搜索 div。它的顶角需要倒圆角。

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

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

【问题讨论】：

您的邮政编码框在右边。
图片是所有浏览器最可靠的选择。 CSS3 圆角仅适用于支持 CSS3 部分的浏览器。我知道它们在 IE 6、7、8 中无法工作，这大约是 Internet 的 45%。

【解决方案1】：

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

（是的，图片大小和颜色都正确）

【讨论】：

糟糕，我忘了启用“对齐像素”，所以该图像的左边缘有点模糊。
还值得指出 CSS3 PIE 作为解决方案 - 但这只能解决所有的问题：http://css3pie.com/documentation/known-issues/#shorthand
非常感谢您的帮助！非常感激！你能给我提供你使用的尺寸吗？所以我复制了它，包括捕捉到像素。谢谢:)
@hart1994：我的图像最终是226x131（感谢不使用像素捕捉），但您应该使用225x130。

【解决方案2】：

问题是您的背景颜色覆盖了您的图像。如果你去掉 background-color 属性，你会看到角落的图像。

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

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

【讨论】：

【解决方案3】：

不使用border-radius (CSS3) 和不使用图片创建圆角有两种方法：

使用四个小的divs 和height: 1px 并逐渐增加宽度以产生圆角错觉。这可能是更好的选择。有关代码示例，请参阅以下站点： http://webdesign.about.com/od/css/a/aa072406.htm
使用 HTA 文件和浏览器 hack。我从来没有亲自尝试过。有关代码示例和技术，请参阅以下站点 http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

【讨论】：

【解决方案4】：

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

【讨论】：