div 边框,在移动端显示问题

div boder为1,在移动端有时候会显示2,有时候边框不显示,可用如下代码来解决,效果可以点击这里

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
<!--
.box {width: 100px;height: 100px;background: #f00; margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}
</style>
</head>
<body>
<div class="box sibian"></div>
<div class="box shangbian"></div>
<div class="box xibian"></div>
<div class="box zuobian"></div>
<div class="box youbian"></div>
<div class="box zuoshangbian"></div>
<div class="box youshangbian"></div>
<div class="box zuoxiabian"></div>
<div class="box youxiabian"></div>
<div class="box wushangbian"></div>
<div class="box wuyoubian"></div>
<div class="box wuxiabian"></div>
<div class="box wuzuobian"></div>
</body>
</html>

 

打赏