CSS - 左上角背景图像(弯曲)
我目前正在制作网站here。右边是一个邮政编码搜索div。该顶部的角落需要四舍五入。CSS - 左上角背景图像(弯曲)
我正在使用图像来圆角。我不想使用其他方法,除非它完全支持所有浏览器,直到IE7。
我已经在导航上(左侧,只有右上角和左下角)做过这个操作。但我似乎无法让它在左上角工作。请帮忙。这可能是我犯的一个愚蠢的小错误。
如果“邮政编码搜索格”是固定的width
和height
(因为它似乎是),最简单的解决办法只是做整个事情作为图像,并设置为background
:
(是,图像是正确的大小和颜色)
糟糕,我忘记启用“捕捉像素”,所以图像的左边缘有点模糊。 – 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
对于较早的使用图像的浏览器支持是最好的,也许是唯一的选择。如果您不介意较低级别的浏览器支持CSS3 Rounded Corners(位于W3School的CSS3寄宿者页面)可能会有您的答案。
我希望这会有所帮助。
有对不使用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
问题是您的背景颜色覆盖了您的图像。如果您删除背景颜色属性,您将看到角落图像。
以您的图片http://molossi.psm2.co.uk/assets/images/li-bg-tl.png并加入它的灰色背景。将整个灰色背景元素的宽度和高度设置为225x120或任何你想要的,你会很好去。基本上从它只是角落图片移到完整图片。
如果你不想这样做,然后把你的角落图像,并使其225px的长度与灰色延伸到一路。
您的邮政编码框位于右侧。 – Sparky 2011-06-10 17:32:53
图像是所有浏览器最可靠的选项。 CSS3圆角仅适用于支持CSS3部分的浏览器。我知道他们不会在IE 6,7,8中工作,这大约占互联网的45%。 – Sparky 2011-06-10 17:35:07