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

我目前正在制作网站here。右边是一个邮政编码搜索div。该顶部的角落需要四舍五入。CSS - 左上角背景图像（弯曲）

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

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

来源

2011-06-10 ryryan

您的邮政编码框位于右侧。 – Sparky 2011-06-10 17:32:53

图像是所有浏览器最可靠的选项。 CSS3圆角仅适用于支持CSS3部分的浏览器。我知道他们不会在IE 6,7,8中工作，这大约占互联网的45％。 – Sparky 2011-06-10 17:35:07

如果“邮政编码搜索格”是固定的width和height（因为它似乎是），最简单的解决办法只是做整个事情作为图像，并设置为background：

enter image description here

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

来源

2011-06-10 17:30:12 thirtydot

糟糕，我忘记启用“捕捉像素”，所以图像的左边缘有点模糊。 – thirtydot 2011-06-10 17:41:35

作为一个解决方案，它也值得指出[CSS3 PIE]（http://css3pie.com/） - 但这只能做所有的角落：[http://css3pie.com/documentation/known-issues/ #shorthand]（HTTP：// css3pie。com/documentation/known-issues /＃简写） – thirtydot 2011-06-10 17:44:31

非常感谢您的帮助！非常感激！你能否给我提供你使用的尺寸？所以我重新制作了包含像素的图像。谢谢:) – ryryan 2011-06-10 18:58:17

-2

对于较早的使用图像的浏览器支持是最好的，也许是唯一的选择。如果您不介意较低级别的浏览器支持CSS3 Rounded Corners（位于W3School的CSS3寄宿者页面）可能会有您的答案。

我希望这会有所帮助。

来源

2011-06-10 17:28:58 Ryan

有对不使用border-radius（CSS3）创建圆角和不使用图像的两种方法：

使用四个小div S的height: 1px并逐步增加了创建圆角假象宽度。这可能是更好的选择。代码示例请参阅以下网站： http://webdesign.about.com/od/css/a/aa072406.htm
使用HTA文件和浏览器黑客。我从来没有亲自尝试过。对于代码样本和技术，请参见以下站点 http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

来源

2011-06-10 17:29:59

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

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

如果你不想这样做，然后把你的角落图像，并使其225px的长度与灰色延伸到一路。

来源

2011-06-10 17:43:03 jray0039

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

回答

相关问题