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 - 左上角背景圖像（彎曲）

回答

相關問題