今天这篇给大家分享的知识是“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控制边框长度效果有什么便利的方法内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 基于CSS怎样实现六边形图片，思路和方法是什么

  基于CSS怎样实现六边形图片，思路和方法是什么？这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧

• CSS位置在页面内和外部调用的区别是什么

  1、减少http请求链接到外部不免增加额外的http请求，这个是很耗时的。2、避免裸页假如存放css的服务器挂掉，整个首页就挂掉了。放在页面内，比较安全。用户访问页面时，不会因为css加载不上，而造成裸页面。3、关于修改你可能说这样不便于修改和管理。实际上一般都是用程序动态加载进来的，然后用缓存静态化首页等。知道的 ...

• CSS背景图片自适应屏幕代码示例

  很多人在做网站页面设计的时候，经常会用一张图片来做背景，这时我们就需要考虑网页兼容各种屏幕大小，背景图片要能够按比例缩放来自适应屏幕的宽度。那么这个效果是如何实现的呢？下面是具体的实现代码，感兴趣的朋友一起来学习一下吧。

• Canvas怎么制作雪花屏404效果，思路及方法是什么

  本文主要介绍了Canvas如何做个雪花屏版404的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用CSS怎样做三角形叠加放大的效果？

  相信有一点CSS基础的朋友应该都可以轻松实现一个css三角形，那么如果我们想要更酷炫的三角形效果要怎样做呢？其实我们可以用CSS3来做一个三角形叠加放大的特效，实现效果及代码如下，感兴趣的朋友可以参考。