字段集和图例周围的正确的圆角边框

这里的默认行为：

fieldset { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
} 
 
legend { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 5px 15px; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
</fieldset>

我想传说是 “字段集的一部分”，像这样：

enter image description here

我试着很多技巧，玩border-bottom和box-shadow没有成功。
有没有人知道一个方法来正确实现这一点？

谢谢。

来源

2014-10-31 zessx

阅读所有的答案，我来到了一个令人满意的解决方案，没有任何变化，也没有额外的标记：

fieldset { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
} 
 
legend { 
 
    position: relative; 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 5px 15px; 
 
    line-height: 18px; 
 
} 
 
legend:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -1px; 
 
    left: -1px; 
 
    right: -1px; 
 
    height: 13px; 
 
    z-index: 1; 
 
    border: 1px solid white; 
 
    border-top: none; 
 
    border-radius: 0 0 5px 5px; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
</fieldset>

来源

2014-10-31 15:16:55 zessx

如果你添加一个内部的<span>到图例中，你可以用一个小小的css hackery实现这个效果。

fieldset { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    margin-top: 20px; 
 
} 
 
legend { 
 
    border: 1px solid #ccc; 
 
    border-bottom: 0; 
 
    border-radius: 5px 5px 0 0; 
 
    padding: 0 18px; 
 
    position:relative; 
 
    top: -10px; 
 
} 
 
legend span { 
 
    position:relative; 
 
    top: 8px; 
 
}

<fieldset> 
 
    <legend><span>Legend</span></legend> 
 
</fieldset>

如果您不能添加内宽度，就可以得到类似的效果，但它不是很完美。

fieldset { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    margin-top: 20px; 
 
} 
 
legend { 
 
    border: 1px solid #ccc; 
 
    border-bottom: 0; 
 
    border-radius: 5px 5px 0 0; 
 
    padding: 8px 18px 0; 
 
    position:relative; 
 
    top: -14px; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
</fieldset>

来源

2014-10-31 14:46:27 JakeParis

这里是一个解决方案的想法没有添加标记。使用与图例和字段集背景颜色相同的伪元素来隐藏图例的底部。

下面是一个示例。根据需要调整。

fieldset { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    position: relative; 
 
    margin-top: 30px; 
 
} 
 
legend { 
 
    border: 1px solid #ccc; 
 
    border-radius: 5px; 
 
    padding: 5px 15px; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 20px; 
 
    background-color: #fff; 
 
} 
 
legend::after { 
 
    content: ''; 
 
    background-color: #fff; 
 
    height: 7px; 
 
    right: -1px; 
 
    left: -1px; 
 
    bottom: -1px; 
 
    border-radius: 0 0 5px 5px; 
 
    position: absolute; 
 
}

<fieldset> 
 
    <legend>Legend</legend> 
 
</fieldset>

来源

2014-10-31 14:55:44 Talmid

字段集和图例周围的正确的圆角边框

回答

相关问题