css实现标签的边框显示一半

最新推荐文章于 2024-02-23 11:19:04 发布

学web的碎碎

最新推荐文章于 2024-02-23 11:19:04 发布

阅读量1w

点赞数

分类专栏： HTML + CSS 文章标签：前端边框显示一半 HTML css

本文链接：https://blog.csdn.net/weixin_42695298/article/details/88373719

版权

HTML + CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

项目中遇到边框显示一半这个问题，现在就一起来看一下。

下方是我用小程序项目为例演示的，具体情况还是看项目的需求来调整。

//  
<view id="{{item.order_status}}" class="weui-navbar__item {{activeIndex == item.order_status ? 'weui-bar__item_on' : ''}}" >
        <view class = "weui-navbar__title">我的智能</view>
        <view class = "weui-navbar__title">日志</view>
</view>


// 
.weui-bar__item_on:after {
     position: absolute; 
     width: 100rpx;      // 边框的宽度
     height: 4rpx;
     left: 37%;            //距离 view 标签的距离
     bottom: 0; 
     background-color: #00C09C;     //  颜色
}

下方为效果图：

效果图