边框上带有文字

mac2022-06-30 58

效果图：

实现代码

<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; }

转载于:https://www.cnblogs.com/xiaoQ0725/p/8038257.html