CSS控制边框长度效果有什么简便的方法

发布时间：2023-09-25 13:52:39 所属栏目：语言来源：

导读：今天这篇给大家分享的知识是“CSS控制边框长度效果有什么便利的方法”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“CSS控制边框长度效果有什么便利的方

今天这篇给大家分享的知识是“CSS控制边框长度效果有什么便利的方法”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“CSS控制边框长度效果有什么便利的方法”文章能帮助大家解决问题。

我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便。

这里使用的是微信小程序编写的，所以标签会是view,和html不冲突

html：

<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab=='1'?'active':''}}" data-current="1" bindtap="clickTab">安全帽监控</view>
<view class="swiper-tab-item {{currentTab=='2'?'active':''}}" data-current="2" bindtap="clickTab">危险区域监控</view>
</view>
css：

.swiper-tab {
   width: 100%;
   font-family: PingFangSC-Medium;
   font-size: 28rpx;
   border-bottom: 2rpx solid #F1F1F1;
   text-align: center;
   height: 88rpx;
   line-height: 88rpx;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
   background: #ffffff
}

.swiper-tab-item {
   width: 50%;
   color: #252627
}

.active {
   color: #4876F9;
   font-weight: bold;
   position: relative;
}
上面都是页面的基础样式，想要实现边框的长度控制，就需要使用:after
伪类css：

.active:after {
   content: '';
   position: absolute;
   bottom: 0;
   height: 6rpx;
   width: 100rpx;
   background-color: #4876F9;
   left: 50%;
transform: translateX(-50%);
}
最后两句是控制边框居中的问题。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!