CSS3 for HTML5 Legend in fieldset

前端之家收集整理的这篇文章主要介绍了CSS3 for HTML5 Legend in fieldset前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
你能否建议CSS使用下面的引用(使用 CSS3渐变和边界)?

当前版本的HTML如下所示:

<section style="margin: 10px;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

解决方法

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    Box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

(http://jsfiddle.net/ESkRt/1/)

原文链接:https://www.f2er.com/css/216927.html

猜你在找的CSS相关文章