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


Posted in HTML / CSS onJanuary 18, 2022

前言:

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 边框长度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
如何写php程序?
2006/12/08 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
javascript实现的HashMap类代码
2014/06/27 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python3.5仿微软计算器程序
2020/03/30 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
.net面试题
2015/12/22 面试题
警示教育活动总结
2014/05/05 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
班组长安全工作职责
2014/07/15 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js