如果 div 高于则隐藏边框答案

【问题标题】：hide border if div is above如果 div 高于则隐藏边框
【发布时间】：2012-03-20 18:39:10
【问题描述】：

我有一个带边框的<div id="content">。在此div 上方是另一个<div id="header">，带有一些文字。我想在边框上显示文本，但我不想显示它。

为了更容易解释，我在这里发布了我的源代码：http://jsfiddle.net/4HSEn/，这就是我想要实现的目标：

文本将是动态的，背景将是渐变的。所以图像不是解决方案。

我知道如何使用 fieldset 和 legend 标记来实现这一点，但我正在寻找使用 div 或任何其他标记的解决方案。

在这里找到了一些东西：Is it possible to achieve a <fieldset>-like effect without using the <fieldset> tag?，但是对于 legend，使用了背景色：#FFF，这对我没有多大帮助：/

【问题讨论】：

【解决方案1】：

未经检验的理论，但也许你可以给#header 与body 的背景相同的渐变背景，然后用相对于body 的X 和Y 位置偏移#header 的背景位置（使用js）？

基本上我是在暗示一种掩蔽效果。

编辑：将 #content 替换为正文，以更符合 OP 当前的代码示例。

【讨论】：

我实际上非常接近使用 JS 的解决方案。但后来我放弃了。我已经用计算我需要哪种颜色的脚本更新了 jsfiddle（问题中的 url）。如果我有时间，我会完成脚本并发布我的解决方案。为想法 +1

【解决方案2】：

为什么不通过将顶部位置设置为负值来推动内容 div：

<div id="header" style="background-color: blue;">Demo</div> <div id="content" style="top: -15px; border: 1px solid white"></div>

【讨论】：

【解决方案3】：

用<span style="background-color: blue;"> 或类似的东西将您的文本括起来。应该可以的。

【讨论】：