[分享]css中如何给边框加文字

CSS中可以通过给边框添加文字来实现一些特殊的边框效果。下面是一些实现边框添加文字的方法。/方法一：使用伪元素/ .box{ border: 2px solid 333; : relative; } ...

CSS中可以通过给边框添加文字来实现一些特殊的边框效果。下面是一些实现边框添加文字的方法。

/*方法一：使用伪元素*/
.box{
    border: 2px solid #333;
    position: relative;
}
.box::before{
    content: "文字内容";
    position: absolute;
    top: -20px;     /*根据需求自行调节*/
    left: 10px;
    background-color: #fff;
    padding: 0 10px;
    font-size: 16px;
}

/*方法二：使用绝对定位*/
.box{
    position: relative;
}
.box span{
    border: 2px solid #333;
    position: absolute;
    top: -20px;     /*根据需求自行调节*/
    left: 10px;
    background-color: #fff;
    padding: 0 10px;
    font-size: 16px;
}

/*方法三：使用padding和background*/
.box{
    padding-top: 20px;     /*根据需求自行调节*/
    border: 2px solid #333;
    background: #fff;
    background-clip: content-box;
    position: relative;
}
.box p{
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 16px;
    margin: 0;
    padding: 0;
} 

以上三种方法均可实现边框添加文字的效果，选择哪种方法取决于实际需求。