边框上带有文字
效果图:
实现代码
<div class="row wrap" style="margin-bottom: 20px; ">
<p class = "circleborder circleborderOne"></p>
<span class="wraptitle">社保收支统计</span>
<p class = "circleborder circlebordertwo"></p>
<div class="col-md-12"> <!--内容-->
<div class="c_center ysb_center" id="sb_d_1"></div>
</div>
</div>
样式:
.wrap{
margin-top: 10px;
position: relative;
border: 1px solid deepskyblue;
box-sizing: border-box;
}
.wraptitle{
position: absolute;
top: -12px;
left: 23px;
width: 106px;
padding: 0 5px;
color: #b9c9f1;
font-family: "微软雅黑";
background-color: #101d2d;
}
.circleborder{
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: deepskyblue;
border: 1px solid deepskyblue;
}
.circleborderOne {
margin-top: -5px;
margin-left: 13px;
}
.circlebordertwo {
margin-top: -21px;
margin-left: 129px;
}
实现边框上带有文字也可以使用 fieldset
eg:
<fieldset class="col-md-12 chart-box wrap"> <legend class="sbdsjtitle sztitle">社保收支统计</legend> <p class = "circleborder circleborderOne"></p> <p class = "circleborder circlebordersz"></p> <div class="bdimg" id="sb_d_1"></div> </fieldset>
.wrap { border: 1px solid deepskyblue; } .sbdsjtitle { width: 100px !important; margin-left: 30px; padding-left: 10px; margin-bottom: 0px !important; font-size: 16px !important; color: #b9c9f1 !important; border-bottom: 0px !important; } .sztitle { width: 115px !important; } .circleborder { display: block; width: 10px; height: 10px; border-radius: 10px; background-color: deepskyblue; border: 1px solid deepskyblue; } .circleborderOne { margin-top: -15px; margin-left: 21px; } .circlebordersz { margin-top: -21px; margin-left: 145px; }