考虑以下代码：http: //jsfiddle.net/A98vk/
包装器 div 有两个（左上角和右上角）圆角。第二个 div 是直接嵌套的，我想给它一个背景渐变。
我遇到的问题是，当 css 属性border不存在或设置为0or时，背景线性渐变（抱歉只添加 webkit 版本，我有 Chrome）会被裁剪0px [any params]。当我重新设置属性时，问题就解决了。
谁能告诉我它有什么问题？我知道我可以设置border: 1px solid rgba(0,0,0,0)，但这对我来说似乎是一种解决方法。
保证金崩溃正在发生。在 stackoverflow 上有很多关于边距折叠的问题/答案。我自己回答了一个（也许更多）：在 HTML5 网页中添加 CSS 边框更改定位
基本上 h1 的边距“折叠”并应用于周围的标题。没有裁剪背景。标题只是变小了。
当它们之间没有任何东西时，元素边距会折叠。当您在那里添加边框时，您会在它们之间放置一些东西，因此不会崩溃。
对此还有一点需要了解，包括阻止边距折叠的其他方法。您可以在上面查看我的答案，或者简单地在 Google 上搜索可能更详细的解释。
您可以添加overflow:auto（或hidden）到.headerdiv 并修复裁剪。