如何很好地隐藏CSS边界的一部分

Question

我正在为iPhone做一个网络应用程序，我遇到了一些边界问题。 为了简化事情，我有一个身体的背景图像，一个带圆角的盒子里面有一些元素和一个标题，这就是问题开始的地方，因为我希望我的标题位于我的盒子的顶部边框而没有背后的边界线

以下是截图：    我看不到任何正确渲染的解决方案，你们有些猜测吗？ 非常感谢

Answer 1

从我可以收集到的内容来看，您应该使用fieldset元素（因为您将表单元素“分组”在一起），这也很方便地按照您希望的方式进行：

<fieldset>
    <legend>Promoter</legend>
    <select>
        <option>Choose a promoter</option>
    </select>
</fieldset>

造型很简单。使用CSS对齐legend文本并设置fieldset边框的样式：

fieldset {
    border: 1px solid black;
    border-radius: 5px;
}
legend {
    text-align: center;
}

有关实例，请参阅this jsFiddle demo。

Answer 2

不确定是否有简单的基于纯CSS的解决方案。

使用与背景的一般颜色混合的颜色，在某种程度上实现您想要的方法是在浮动在边框上方的文本上使用text shadow。您可以调整值，使边框（至少大部分）在文本后面消失。这当然也会淡化背景图像，取而代之的是阴影的颜色，但无论如何它看起来都不错。 （对文本有更坚实的背景也会使阅读更容易）。