android 极细线
最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位 单条 border .hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 四条 border .hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; top: 0; left: 0; border-bottom: 1px solid #000; //设置底边框极细线 -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } //一般不用 样式使用的时候,也要结合 JS 代码,判断是否 Retina 屏 if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'hairlines'; }
这样会影响点击事件,所以在可以点击的地方的z-index大于加了极细线的,这样加了极细线的地方就不会挡住它上面的可以点击的地方。
下面的方法没有尝试:
在app应用开发中,我们常常都需要用到css3来设置应用的样式。由于app都是在移动设备上进行展示,所以边框描边的线一般都小于1px,而以往我们使用的都是1px及以上的。那么问题来了,对于小于1px的边框怎么处理呢?为大家介绍几种css3中细线边框的写法,希望对遇到类似问题的童鞋有帮助。 1、做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px .line li{ background: url('line.png') left top no-repeat; background-size: 100% 1px; background-position: left bottom;} <ul class="line"> <li></li> <li></li> <li></li> </ul> 这种方法有一个问题,就是左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那岂不是还要再做图片了; 2、通过上面的方法,我们也很容易联想到线性渐变(linear-gradient),具体实现如下: .line li{ border: none; background-image: -webkit-linear-gradient(#222 50%,transparent 50%); background-image: -moz-linear-gradient(#222 50%,transparent 50%); background-image: -o-linear-gradient(#222 50%,transparent 50%); background-image: linear-gradient(#222 50%,transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom;} <ul class="line"> <li>linear-gradient</li> <li>linear-gradient</li> <li>linear-gradient</li> </ul> 这种方法仍然不够完美,改变描边位置(left,top,right,bottom)时需要修改参数,如 left描边需要改变: background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left; 3、那还有什么方法可以解决细线边框问题呢?我们不妨可以试试了CSS3阴影(box-shadow),用阴影做描边然后用伪类把多余的给遮罩着: .line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;} .line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;} <ul class="line"> <li>box-shadow</li> <li>box-shadow</li> <li>box-shadow</li> </ul> 虽然,小编分享的几种方法都还存在瑕疵,具体使用哪种方法,你可以根据你的情况而定。如果你有更完美的解决方案的话,也欢迎分享出来,大家一起学习,一起进步。