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%);

}

最后两句是控制边框居中的问题。

（编辑：银川站长网）

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