CSS中可以通过给边框添加文字来实现一些特殊的边框效果。下面是一些实现边框添加文字的方法。/*方法一:使用伪元素*/ .box{ border: 2px solid #333; position: r
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; }
以上三种方法均可实现边框添加文字的效果,选择哪种方法取决于实际需求。
粉丝
0
关注
0
收藏
0