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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
You might like
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JS中的BOM应用
2018/02/02 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
element中的$confirm的使用
2020/04/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
详解Python中heapq模块的用法
2016/06/28 Python
Python线性回归实战分析
2018/02/01 Python
python用户管理系统
2018/03/13 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
软件测试面试题
2015/10/21 面试题
七一表彰活动方案
2014/01/18 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
教师年度考核评语
2014/04/28 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技