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 06 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 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
PHP安装问题
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
如何写好升职自荐信
2014/01/06 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
小学教师师德反思
2014/02/03 职场文书
个人授权委托书范本
2014/04/03 职场文书
体育教师求职信
2014/05/24 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
优秀大学生申请书
2019/06/24 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS