可能有圆形/弧形的边缘，而不是角落吗？

Question

我想建立一个类似下面图片的东西。

容器将是100%宽度，标题将有固定高度，但正文高度将是动态的。

通过对“正文”div进行以下操作，我几乎可以得到我想要的结果。

border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-moz-border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 15px 15px 0 0;

理论上，我希望“Header” div是弧形的，而主体部分在下面，但我认为这是不可能的（标题将包含一个填充图像）。

编辑：忘记提到。使用上述代码，并在底部div中添加margin-top:-15px，它在Firefox和IE中确实有效，但在Chrome和Safari中无效。地图和滑块仍然会超出Header div并且不会被切断。

编辑2 http://jsfiddle.net/ShKNu/4/ ^ 这就是我当前的设置。正如您所看到的，地图没有被切断在曲线处，而是直接进入了标题。

- lifwanian

---

将头部div放在主体div下方？ - Cole Tobin

你尝试过使用clearfix而不是overflow: hidden吗？ - elclanrs

你尝试过使用 z-index 属性吗？body < div < header。 - erdimeola

我通过对Body div进行以下操作，几乎得到了我想要的结果。你能否演示一下，并说明它失败的情况？ - Eric

这是 Fiddle 中的代码：http://jsfiddle.net/ShKNu/。正如您所看到的，它是可以工作的。但我需要一些内容“在”曲线下方，当我添加包含`position:absolute`的第三方内容时，它会覆盖上方。 - lifwanian

Answer 1

你正在朝着正确的方向前进

使用overflow: hidden和负的margin-top在"body"或.main部分上设置曲线是一个不错的选择。为了解决第三方内容的问题，这些内容需要设置position: absolute，你只需要确保你的.main设置了position: relative。

这里有一个演示，里面包含了定位和非定位的内容（注意：我调整了曲线使其更加明显）。

它在IE9+、Chrome和FF中测试良好。显然，任何放置在标题或其他.main之外的第三方内容都不一定会被隐藏，但这是可以预料到的。即使如此，通过适当的定位(relative)和z-indexing(main高于header)设置，也可以解决这个问题，就像这个演示所示。

- ScottS

Answer 2

尝试使用margin:-20px或其他度量单位。

- TJ Mazeika

---

抱歉，我忘记了。我已经在底部的div中添加了margin-top:-15px，它在Firefox和IE中有效，但在Chrome和Safari中无效。 - lifwanian

@LeeBurrows：仅仅因为以问号结尾并不意味着它正在寻求澄清。在这里，它是一个建议，去掉“你能”和问号使其成为一个完全有效的，虽然简短（如果不正确）的答案。 - icktoofay