1、通过伪元素的高度实现0.5px
.hairlines .mine-pic:before{ content:''; 200%; position: absolute; top:0; left: 0; right:0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin:0 0; transform-origin: 0 0; height:1px; background-color:#ccc; }
2、通过阴影实现ios o.5px ,有一些设备会有阴影
#button{ background-image:linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%), linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%); background-size: 100% 1px,0px 100% ,100% 1px, 0px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top; padding: 10px; margin:20px 0; overflow:hidden; }
3、用图片做背景实现细腻1px:安卓,ios均实用。
.deal_count { padding: 23px background-color: #fff; background-image: url(../images/border-bottom.gif); /**高度2px的图,宽度随意**/ background-repeat: repeat-x; background-position: bottom; background-size: auto 1px;
通过以上几种方法 配合使用,可以基本满足所需。