有边界半径封面内部 [英] Have border-radius cover inner divs

问题描述

我在一个网页上有一个Coda滑块（手工制作，不使用插件，但这是不相关的），外部div有一个border-radius。

I have a Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.

一堆内部的div有背景颜色，但是当我想要它们在圆角处时，它们会伸出角落的顶部。

A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.

有什么方法可以实现这个？

Is there any way to achieve this?

推荐答案

我发现WebKit会裁剪一切，如果我把 overflow：hidden ，但Gecko不会（参见我的博客文章代码和截图）。我可以在Gecko做的最好的方法是在内部div中放一个边框半径，或者在封装div中添加边框/填充，使内部div位于角落下。

I found that WebKit would crop everything if I put overflow: hidden on the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.

这篇关于有边界半径封面内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！