CSS使用偽類控制邊框長度的方法
發(fā)布時(shí)間：2021-12-15 09:13:43 作者：胖太乙 
我要評論
我要評論需要實(shí)現(xiàn)一個(gè)邊框長度比容器長度小一些的邊框時(shí)，以往大多數(shù)都是使用div嵌套。現(xiàn)在只需要使用偽類就可以實(shí)現(xiàn)這個(gè)效果，并且使用起來很方便，下面通過本文給大家介紹CSS使用偽類控制邊框長度的方法，感興趣的朋友一起看看吧
前言：
如圖： 我們需要實(shí)現(xiàn)一個(gè)邊框長度比容器長度小一些的邊框時(shí)，以往大多數(shù)都是使用div嵌套?，F(xiàn)在只需要使用偽類就可以實(shí)現(xiàn)這個(gè)效果，并且使用起來很方便。
這里使用的是微信小程序編寫的， 所以標(biāo)簽會是view,和html不沖突
html：
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab=='1'?'active':''}}" data-current="1" bindtap="clickTab">安全帽監(jiān)控</view>
<view class="swiper-tab-item {{currentTab=='2'?'active':''}}" data-current="2" bindtap="clickTab">危險(xiǎn)區(qū)域監(jiān)控</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;
}
上面都是頁面的基礎(chǔ)樣式， 想要實(shí)現(xiàn)邊框的長度控制， 就需要使用:after
偽類css：
.active:after {
content: '';
position: absolute;
bottom: 0;
height: 6rpx;
width: 100rpx;
background-color: #4876F9;
left: 50%;
transform: translateX(-50%);
}
最后兩句是控制邊框居中的問題。
到此這篇關(guān)于CSS使用偽類控制邊框長度的文章就介紹到這了,更多相關(guān)CSS 邊框長度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS邊框長度控制功能的實(shí)現(xiàn),代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-27- 這篇文章主要介紹了CSS新增的:where和:is偽類函數(shù)是什么的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-15
這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-09-01
