<div>: 无边框时背景渐变裁剪答案

【问题标题】：<div>: background gradient cropped when no border<div>: 无边框时背景渐变裁剪
【发布时间】：2013-07-17 14:14:41
【问题描述】：

包装 div 有两个（左上角和右上角）圆角。第二个div是直接嵌套的，我想给它一个背景渐变。

我遇到的问题是，当 css 属性 border 不存在或设置为 0 或 0px [any params] 时，背景线性渐变（抱歉只添加 webkit 版本，我有 Chrome）被裁剪。当我重新打开该属性时，问题就解决了。

谁能告诉我它有什么问题？我知道我可以设置 border: 1px solid rgba(0,0,0,0)，但这对我来说似乎是一种解决方法。

【问题讨论】：

我会说你刚刚发现了一个错误
这确实是一个有趣的案例
@Brewal，不。这只是margin collapsing 在行动（如 JOPLOmacedo 的回答所指出的）
@GabyakaG.Petrioli 是的，我 +1 他的回答。我仍然觉得这种行为很奇怪:)
@wh1t3cat1k，请在您的小提琴 (linear-gradient(to bottom, #abcdef, #febcda);) 中为渐变添加无前缀的 W3C 标准行。仅 Webkit 的设计不是一个好的做法。

【解决方案1】：

保证金正在崩溃。在 stackoverflow 上有很多关于边距折叠的问题/答案。我自己回答了一个（也许更多）：Adding CSS border changes positioning in HTML5 webpage

基本上 h1 的边距会“折叠”并应用于周围的标题。没有裁剪背景。标题只是变小了。

元素边距在它们之间没有任何东西时会折叠。当您在那里添加边框时，您会在它们之间放置一些东西，因此不会出现边距塌陷。

还有一点需要了解，包括阻止页边距折叠的其他方法。您可以在上面查看我的答案，或者简单地用谷歌搜索以获得更详细的解释。

【讨论】：

【解决方案2】：

您可以将overflow:auto（或hidden）添加到.header div 并修复裁剪。

【讨论】：