HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离。下面青岛星网跟大家分享下纯CSS的实现方法。
<div class="method-1-wrap wrap"> <span class="title">文字标题</span> <div class="content"> <p>占位文字占位文字</p> </div> </div> <div class="method-2-wrap wrap"> <div class="title"> <span>文字标题</span> </div> <div class="content">占位文字占位文字</div> </div>
*{ margin:0; padding:0; } .wrap{ margin: 100px auto; width: 500px; } /* 方法一 start */ .method-1-wrap{ position: relative; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; } .method-1-wrap .title{ position: absolute; top: -13px; left: 10%; line-height: 2em; padding: 0 1em; background-color: #fff; } /* 方法一 end */ /* 方法二 start */ .method-2-wrap .title{ position: relative; text-align: center; } .method-2-wrap .title:before{ content: ''; position: absolute; left:0; right:0; top: 50%; border-top: 1px solid #ccc; z-index: -1; } .method-2-wrap .title span{ padding: 0 1em; background-color: #fff; } .method-2-wrap .content{ padding:20px; } /* 方法二 end */