移动项目开发中，安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示，网上搜了一下，解决方法如下：
一、利用css中的transform的缩放属性解决，推荐这个。如下面代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解决1px边框问题</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<style>
.line {position:relative;}
.line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;box-sizing:border-box;}
.list {width:100%;margin:auto;list-style:none;padding:0;}
.list:after {border:1px solid #ccc;border-radius:10px;}
.item {padding:10px;}
.item:after {border-bottom:1px solid #ccc;}
.item:last-child:after {display:none;}
</style>
</head>
<body>
<ul class="list line">
<li class="item line">item001</li>
<li class="item line">item002</li>
<li class="item line">item003</li>
<li class="item line">item004</li>
<li class="item line">item005</li>
<li class="item line">item006</li>
<li class="item line">item007</li>
<li class="item line">item008</li>
<li class="item line">item009</li>
<li class="item line">item010</li>
</ul>
</body>
</html>
这个主要利用after伪类进行缩放。调用公共class，还是很方便的。
二、JS判断是否支持0.5px边框，是的话，则输出类名hairlines
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement(‘div‘);
testElem.style.border = ‘.5px solid transparent‘;
document.body.appendChild(testElem);
if (testElem.offsetHeight == 1)
{
document.querySelector(‘html‘).classList.add(‘hairlines‘);
}
document.body.removeChild(testElem);
}
.hairlines .box {}
目前在用这个方法，使用很方便，无须多余的class，可惜支持的不是很好，IOS8+以上才可以。
三、box-shadow 阴影
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
最先用的就是这个方法，IOS显示不出。很多安卓机显示就是坨翔，黑乎乎的描边。。
四、background-image
.border {
background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
linear-gradient(270deg, red, red 50%, transparent 50%),
linear-gradient(0deg, red, red 50%, transparent 50%),
linear-gradient(90deg, red, red 50%, transparent 50%);
background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
background-repeat: no-repeat;
background-position: top, right top, bottom, left top;
padding: 10px;
}
也能实现效果，使用很不方便
五、图片
.border-image{
border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}
显示效果有点模糊，而且万一以后要修改个颜色，那不坑爹了。
所以，目前推荐第一种方法。
时间： 2024-10-10 07:44:49