精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离。下面青岛星网跟大家分享下纯CSS的实现方法。

先看下效果

HTML部分代码

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

CSS部分代码

*{
  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 */

在线Demo预览

Tags:CSS fieldset 边框