移动端 1px 像素边框问题的解决方案(Border.css)
2024-08-27 06:52:12
前言
关于什么是移动端1像素边框问题,先上两张图,大家就明白了。
解决方案
将以下代码放在border.css文件中,然后引入
常用className border:整个盒子都有边框
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框 **使用:<div class="border-top"></div>**
border.css【注意】
使用时注意:该class名字只作用于(display:block)的块级元素上,其它看不到效果
想改变边框颜色的话,将代码中的所有颜色统一全部替换成你需要的颜色
代码:
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
* 因,边框是由伪元素区域遮盖在父级
* 故,子级若有交互,需要对子级设置
* 定位 及 z轴
*/
.border::before {
box-sizing: border-box;
top: ;
left: ;
height: %;
width: %;
border: 1px solid #eaeaea;
transform-origin: ;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
left: ;
width: %;
height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
top: ;
width: 1px;
height: %;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: ;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: % ;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: %;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: ;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
top: ;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
right: ;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
bottom: ;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
left: ;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: .49dppx) {
/* 默认值,无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: .5dppx) and (max-resolution: .49dppx) {
.border::before {
width: %;
height: %;
transform: scale(.);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: .5dppx) {
.border::before {
width: %;
height: %;
transform: scale(.);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.);
}
}
.
最新文章
- Node.js+Express配置入门
- 真机测试无缘无故finish了。程序也没有启动
- Python的文件与文件夹操作
- [Java][Android][Process] 暴力的服务能够解决一切,暴力的方式运行命令行语句
- sonar-maven-plugin错误2
- IntPtr与自定义结构互转
- java生产者与消费者模式
- C# 视频多人脸识别
- Windows 10 安装ElasticSearch(2)- MSI安装ElasticSearch和安装Kibana
- Luogu P3254 圆桌问题
- “<;textarea>;”内的文字对齐
- vue项目启动时将localhost替换成指定ip地址
- 本地资源_Asset
- lightoj1038(数学期望dp)
- 第七章 :分布式监控与SNMP监控
- PowerDesigner的Name和Code不同步设置
- Just write about
- Linux 开启VNCSERVER
- vertx读取配置文件,获得端口号
- Eclipse使用git最基本流程(提交远程仓库的方法)
热门文章
- 重启nova-scheduler服务,报错Login was refused using authentication mechanism AMQPLAIN
- elasticsearch 官方监控文档 老版但很有用
- putty常用配置修改
- Linux常用基础(三)
- [转帖]kafka 如何保证数据不丢失
- Nginx配置REWRITE隐藏index.php
- Golang 调用 C/C++,例子式教程
- - instanceof 和 isInstance 强转 类型 class MD
- Linux学习笔记之Linux系统的swap分区
- 关于.net core 中的signalR组件的使用