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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 #HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
You might like
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
详解如何在vue中使用sass
2017/06/21 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
保证书范文大全
2014/04/28 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
python 闭包函数详细介绍
2022/04/19 Python