2010-08-29 116 views
5

網站位於:CLICK TO VIEW THE WEBSITECSS3:透明圓角問題

這是問題的一個形象:alt text

正如你所看到的,使用CSS3 border-radiusbackground: transparent我能夠做看起來像div中的「摳圖」。問題應該很明顯,角落也是透明的。

我知道我可以只使用一個圖像,問題會解決,但我想使用CSS3。我認爲可能有一些巧妙的方法來解決這個問題,但我沒有想到它。我想注意到我使用css3pie.com來允許IE6通過IE8 CSS3功能。

+0

我認爲在這種情況下,像*將*是適當的,電除塵器。用你試圖縫合那個背景的方式... – 2010-08-29 04:38:45

+0

offtopic:巧妙地使用圖像和背景漸變。有一段時間我想知道爲什麼當我在高分辨率屏幕上放大窗口時調整了背景。 – mauris 2010-08-29 04:44:21

+0

+1問題很有趣 – 2010-08-29 04:58:40

回答

1

這是一個有點哈克

此規則適用於p標籤

-webkit-box-shadow: #A3AFC6 0px -4px 0px 3px; 
+0

非常感謝。甚至沒有想過做一個盒子的影子。 – ParoX 2010-08-30 18:14:23

0

這在Chrome開發人員工具欄中的工作對我來說...

div.middle_bg將高度設置爲85px。然後在裏面設置p標籤的背景。

+0

Chrome的哪個版本對您有用? 對於我在OSX上使用Chrome 6.0.472.51測試版不起作用。它也不適用於OSX上的Safari 5.0.1。在這兩種情況下,我都會看到如上所示的切口。 – gutch 2010-08-29 04:40:55

+0

同樣在這裏。 'p'標籤已經設置爲'background:transparent' ... – ParoX 2010-08-29 04:48:21

+0

哦......沒有注意到它必須是透明的。無視,我很愚蠢:) – Corey 2010-08-29 14:21:59