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

问题描述

|| 我正在为iPhone开发一个网络应用程序，但是边界有些麻烦。 为简化起见，我有一个背景图像作为主体，一个带有圆角的盒子，里面有一些元素和一个标题，这就是问题的开始，因为我希望标题位于盒子的顶部边框而没有背后的边界。 这是屏幕截图：    我看不到任何解决方案来正确渲染它，你们中有些人有猜测吗？ 不胜感激     

解决方法

        据我所知，您似乎应该使用

fieldset

元素（因为您在一起是“分组”表单元素），它也很方便地满足您的期望：

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

样式很简单。对齐

legend

文本并使用CSS设置

fieldset

边框的样式：

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

有关实时示例，请参见此jsFiddle演示。     ,        不知道是否有一个简单的基于纯CSS的解决方案。 一种可以实现所需效果的方法是，使用一种与背景的一般颜色混合的颜色，使文本在阴影上方的边框上方浮动。您可以调整值，以使边框（至少大部分情况下）在文本后面消失。当然，这也会淡出背景图像，将其替换为阴影的颜色，但是无论如何看起来还是不错的。 （文本的背景更坚实，也将使其更易于阅读）。