在移动端开发时CSS的像素显示是逻辑像素而并不是真实的物理像素，因此美工给出的图片的1px，并不真实对应CSS中的1px，特别是移动端，CSS设置的1px，在手机端看起来可能更粗。为了更真实的还原美工的设计图，可以考虑下面一种解决方案。
为了使一个元素A的边框小于1px，可以设计一个伪元素 ::before 蒙版来实现，代码如下：
.A-style{
position: relative;
}
.A-style::before{
content: '';
width: 200%;
height: 200%;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
//tranform 实现缩放变形，使伪元素和A元素大小一样，但是边框恰好是0.5倍大小
transform: scale(0.5, 0.5);
}
回顾复习 关于边框 内边框 外边框 外边距自动水平居中 外边距的叠压问题 外边距的传递问题
想要去掉input输入框的外边框，需要加 border-style:none;这一属性 但是当input获取焦点后...
按钮的点击时出现黑色边框的问题 添加css属性 按钮的点击后出现蓝色边框的问题 添加css属性
weui 的 button 的边框问题 button 写入 border:none后还是有浅灰色边框，因为还有...
移动端1像素边框问题： 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的，或...
bootstrap按钮的边框问题 用bootstrap做的按钮，点击后，都会出现边框，如何去除？ .btn:foc...
0x001 基本问题 在移动端开发时CSS的像素显示是逻辑像素而并不是真实的物理像素，因此美工给出的图片的1px，...
1. 表格边框重叠导致变粗问题 可89=================以使相邻边框合并在一 2.padding问...
1、移动端适配 2、1px边框问题
问题描述： 微信小程序的button控件有一个灰色的边框，尝试去除边框 border:(none/0); 对按钮没...
本文标题：1像素边框问题
本文链接：https://www.haomeiwen.com/subject/rzumqctx.html
网友评论