html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上

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

先看下效果

HTML部分代码

文字标题

占位文字占位文字

文字标题

占位文字占位文字

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