一看上篇博文的发布日期，就知道自己好久没有写技术文章了。一是可能工作比较忙，二是可能自己也比较懒散啦
。今天重新敲起键盘。来跟大家分享一个最近新学到的技术。一是为巩固自己的掌握程度。也希望能帮到有需要的同学。大神看到的话可以提点意见。帮助小弟更快的成长。
好了正文从这开始：
如何实现在移动设备下1像素的边框，看到这个命题的时候。我心想那不是很简单吗。直接设置css属性：border：1px solid #bbb；这样不就实现了吗。然而现实是残酷的。在pc状态下这个css效果是能实现的。但是在移动设备下。这么写是实现不了的。我们来看组图片对比下。
直接设置1px实现的手持设备边框
直接设置1px pc状态下的边框。
为了能更清楚的看出差别。我们借用ps来进行测量,效果图如下，
手机所显示的1px。
pc显示的1px：
以上说的1px是border：1px solid #000；的情况 。很明显就看出来了。那怎么来实现移动设备1px边框呢：方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/>
<title>1px边框</title>
<style type="text/css">
.content{
position: relative;
}
.content:after{
content: "";
position:absolute;
bottom:0;
left: 0;
right: 0;
border-bottom:1px solid #000;
-webkit-transform:scaleY(0.5);
--webkit-transform-origin:0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>。
然后我们运行在用ps检测看到的效果是这样的
很明显我们成功的完成了移动设备下的1px。
当然还有许许多多的方法来实现移动设备下的1px。我只实现了其中一种方式。
附上几个链接：
以上是我对移动边框1px的认识。可能道行不深。分析可能有不对的地方。希望大家及时指正。我会立马修正错误。
哎，终于写完了。下班回去吃饭
1915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
