CSS 大师请帮我解决这些圆角问题吗？
我正在设计一个网页，我的设计在谷歌的 Chrome 浏览器中运行得很好，但我使用的是 CSS 'border-radius' 属性，我相信你知道 IE 不支持该属性。我正在尝试我能想到的一切，但发生了一些事情给我带来了很多麻烦
- 我试图使其圆角的“盒子”有一个带有背景的白色背景image
- 页面背景是渐变的，外角必须是透明的才能看起来正确。
- 我的盒子周围有一个绿色边框。
这是一个示例图像，显示了我想要实现的目标： 替代文本 http://www.freeimagehosting.net/uploads/77c9ec6c32.png
让我知道查看我当前的 CSS 和 HTML 是否有帮助。我尝试了很多不同的方法，但它们都有这样或那样的问题。框背景在我的 CSS 中设置为右下角设置的非重复图像，淡入淡出效果来自于它部分透明，因此它会淡出为白色，因为这是框的背景颜色。流体解决方案会很好，但我可以使用固定宽度的解决方案。
背景是导致我的主要问题的原因。如果我将 HTML 分解为多个 div，我无法弄清楚如何让背景填充整个内容。
HTML：
CSS：
.内容{
背景颜色：#FFFFFF;
边框：实心 2px #ACD579;
-webkit-border-radius: 13px;
-moz-边框半径：13px；
边框半径：13px；
填充：1em 2em；
}
.内容
{
背景图像：url(../img/pagebG.gif);
背景位置：底部；
背景重复：重复-x;
}
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
- The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
- The page background is a gradient and the outside corners must be transparent to look right.
- I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:<div class="content"><jdoc:include type="component" /></div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果你能提供你的代码会更好，这样我们就可以看到你哪里出了问题。
另外，IE6下会出现分页吗？或者只是一般的IE？
要在 IE 中获得圆角，您可以使用 CSS3 Pie，这使得“Internet Explorer 6-8 能够渲染多个最有用的 CSS3 装饰功能。”。
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".