CSS3：透明圆角问题

Question

网站位于此处：点击查看网站

以下是出现的问题图片：

您可以看到，使用CSS3的border-radius和background: transparent，我能够制作出类似于div被“切割”的效果。但是问题很明显，四个角也成了透明的。

我知道我可以使用图片来解决问题，但我想使用CSS3。我认为可能有一些巧妙的方法来解决这个问题，但我还没有想到。我想指出的是，我正在使用css3pie.com来支持IE6至IE8的CSS3功能。

- ParoX

---

我认为在这种情况下，使用图像会更合适，特别是考虑到您正在尝试拼接背景的方式... - Yi Jiang

离题：图片和背景渐变的巧妙运用。有一瞬间我在想，为什么当我在我的高分辨率屏幕上放大窗口时，背景会重新调整大小。 - mauris

Answer 1

这有点糊弄

这些规则适用于 p 标签

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

- Gilsham

---

非常感谢。我甚至没有想过要做一个盒子阴影。 - ParoX

Answer 2

这对我在Chrome的开发者工具栏中有效...

在 div.middle_bg 上将高度设置为85px。然后在其中的p标签上设置背景。

- Corey

---

你用的是哪个版本的Chrome浏览器？在我的OSX系统上，使用Chrome 6.0.472.51 beta版本无法正常工作。同时，在OSX系统上使用Safari 5.0.1也无法正常工作。在这两种情况下，我都看到了如上所示的裁剪效果。 - gutch

哦... 没注意到它必须是透明的。不要理我，我很蠢 :) - Corey