移动端border 1px显示太粗,怎么细一点?

直接上代码,2种方式,第一种是进行1px缩放,2是进行渐变。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>像素为1px</title>
<style type="text/css">
    .border{ position: relative; margin-bottom: 20px;}
    .border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color: #ccc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
    .border2{background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x; background-size: 100% 1px; }
</style>
</head>
<body>
    <div class="border">像素为1px解决方法一</div>
    <div class="border2">像素为1px解决方法二</div>
</body>
</html>
点赞