CSS使用伪类控制边框长度的方法

  发布时间:2021-12-15 09:13:43   作者:胖太乙   我要评论
需要实现一个边框长度比容器长度小一些的边框时,以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果,并且使用起来很方便,下面通过本文给大家介绍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%);
}

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

到此这篇关于CSS使用伪类控制边框长度的文章就介绍到这了,更多相关CSS 边框长度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • CSS边框长度控制功能的实现

    这篇文章主要介绍了CSS边框长度控制功能的实现,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-27
  • CSS新增的:where和:is伪类函数是什么

    这篇文章主要介绍了CSS新增的:where和:is伪类函数是什么的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-15
  • 浅谈CSS 伪元素&伪类的妙用

    这篇文章主要介绍了浅谈CSS 伪元素&伪类的妙用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-09-01

最新评论