简单实现文字嵌入到边框的效果

panrunjun

于 2024-11-08 22:16:27 发布

阅读量434

点赞数 5

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_57980861/article/details/143635960

版权

<view class="top-box">
        <view class="span">经营情况</view>
</view>


// css
.span {
    position: relative;
    top: -20px;
    font-weight: bold;
    z-index: 99;
    width: 65px;
    padding:0 5px;
    background-color: #fff;
}

.top-box {
    background: #fff;
    padding: 10px 15px;
    border: solid 1px #cdcdcd;
    border-radius: 5px;
    margin: 10px;
}

使用positon定位移动文字到上方，设置z-index和背景颜色覆盖border