移动端实现0.5px线条

kelen|2017-03-30


移动端写页面时候,由于手机屏幕小,为了让线条看起来更细腻,所以需要0.5px的线条,下面总结了两种常用的方法

利用transform属性

原理很简单,就是利用伪类元素绘制1px的线条,然后利用transform:scale(0.5)缩放一半就变成了0.5px

<style type="text/css">
	.line2 {
		position: relative;
		height: 1px;
	}
	.line2:after {
		position: absolute;
		content: '';
		width: 200%;
		height: 1px;
		transform-origin: 0 0;
		transform: scale(0.5);
		background: red;
	}
</style>
<div class="line2"></div>

利用linear-gradient属性

原理是利用一半背景色,一半边框色来实现的,例如下面代码

<div style="height: 200px; width: 100px; background: linear-gradient(blue 50%, red 50%)"></div>

实现的效果

根据这个原理可以这样实现,第一个为背景色即可

.line1 {
	height: 1px;
	background: linear-gradient(#fff 50%, red 50%);
}