字段集和圖例周圍的正確的圓角邊框

這裏的默認行爲：

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

字段集和圖例周圍的正確的圓角邊框

回答

相關問題