pc端你写一个边框 1px ,那就是1px 没什么异常，移动端可能在这个机器上细一点，那个机器上粗一点，
这就产生了问题，原因主要是屏幕的类型造成的，原因这里不探讨，只看解决方案：
先看看下面这两种方案：
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
style>
.test {
width:
100
px;
height:
50
px;
border:
1
px
solid
#000;
margin:
0
auto;
}
.a1 {
width:
100
px;
height:
50
px;
border:
0.5
px
solid
#000;
margin:
0
auto;
margin-top:
5
px;
}
.a2 {
width:
100
px;
height:
50
px;
border:
1
px
solid
#fff;
border-bottom:
1
px
solid
#000;
box-shadow:
0
1
px
1
px
#fff;
margin:
0
auto;
margin-top:
5
px;
}
.a3 {
width:
100
px;
height:
50
px;
box-shadow:
inset
0
px
-1
px
1
px
-1
px
#000;
margin:
0
auto;
}
</
style>
</
head>
<
body>
<
div
class=
"test">常規設置1px像素</
div>
<
div
class=
"a1">0.5px</
div>
<
div
class=
"a2">box-shadow遮蓋</
div>
<
div
class=
"a3">box-shadow凹陷</
div>
</
body>
</
html>
效果图：（iPhone 5s）
首先 A是正常情况下设置 1px 的时候显示的样式；
其次 B是设置0.5px的情况下显示的样式；（不是所有的机型都支持0.5px 这里只是用来对比）
然后 C是使用box-shadow遮盖border 实现的样式，这个方法我在网上看到，不过实际看来
一点效果没有，应该是个错误的方法吧，不做深究，有知道的小伙伴可以教教我，不胜感激；
最后 D是利用凹陷实现的边框，宽度没有问题，相当好了，但是可以看出，相较于正常的0.5px的
显示颜色上淡了一些，这是个缺点；
上面的两种方法证明 利用凹陷实现1px 的边框是OK的，可以用的，仅此而已；下面再看看其它的方法：
这个方法是我在腾讯财经上看到的，来看看：效果图和代码部分
这个效果是利用transform:scale() 进行缩放产生 1px 的效果；
下面我们利用这个方法实现以下看看效果怎么样：
代码：
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
style>
.test {
width:
100
px;
height:
50
px;
border:
1
px
solid
#000;
margin:
0
auto;
}
.a1 {
width:
100
px;
height:
50
px;
border:
0.5
px
solid
#000;
margin:
0
auto;
margin-top:
5
px;
}
.a2 {
width:
100
px;
height:
50
px;
border:
1
px
solid
#fff;
border-bottom:
1
px
solid
#000;
box-shadow:
0
1
px
1
px
#fff;
margin:
0
auto;
margin-top:
5
px;
}
.a3 {
width:
100
px;
height:
50
px;
box-shadow:
inset
0
px
-1
px
1
px
-1
px
#000;
margin:
0
auto;
}
.a3::after{
position:
relative;
top:
40
px;
content:
'';
display:
block;
background:
#000;
width:
200
px;
height:
1
px;
transform:
scaleY(
0.5)
}
</
style>
</
head>
<
body>
<
div
class=
"test">常規設置1px像素</
div>
<
div
class=
"a1">0.5px</
div>
<
div
class=
"a2">box-shadow遮蓋</
div>
<
div
class=
"a3">box-shadow凹陷</
div>
<
div
class=
"a4">利用transform:scale()</
div>
</
body>
</
html>
显示效果：
可以看出这种方法也是OK的；
我们这里只是简单表现了一下一个1px 的线条如何实现，但是上面的线条位置并不是我想要的，或者说
我想实现的是div的四周边框1px 的线，下面再完整的实现一下：
<!DOCTYPE html>
<
html
lang=
"en">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no">
<
title>Document</
title>
<
style>
.test {
position:
relative;
width:
100
px;
height:
200
px;
}
.test::after {
content:
"";
box-sizing:
border-box;
position:
absolute;
left:
0;
top:
0;
border:
1
px
solid
#000;
width:
200
%;
height:
200
%;
transform:
scale(
0.5);
transform-origin:
0
0;
}
.abc {
width:
100
px;
height:
200
px;
border:
1
px
solid
#000;
}
</
style>
</
head>
<
body>
<
div
class=
"test">奥术大师多所多</
div>
<
p
class=
"abc"></
p>
</
body>
</
html>
上面的效果：
同上上面的例子我们可以看出，当我需要单独一条线的时候，那么就是相当于我创造了一个1px 的
线，然后贴在了我想要的地方，就和贴纸一样，位置是可以通过父级加相对定位，然后给线加绝对定位
来实现线的移动；
那么，四周1px的边框的实现就好理解了，你的div 还在那个地方没有变化，没有边框没有颜色，然后，
我们通过after伪类创造了一个边框1px的贴纸，这个贴纸和div的大小相同，然后把贴纸贴在div上面，
相当于覆盖了，视觉上看来就是div有了边框；
方法还有很多，暂时到这，后续继续补充；
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
