在手机端，如果有1px的实线就会显得非常粗，那我们能否实现0.5px的实线，来优化用户体验呢？
在frozenui里面有ui-border的写法，他们是用background-image的属性webkit-gradient来实现0.5px的实线，
.ui-border-t {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #ddd), to(#ddd));
}
.ui-border-b {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #ddd), to(#ddd));
}
但是上面这种写法就会有一个问题，当一个元素有多个ui-border时，例如，<p class="ui-border-t ui-border-b ">边框</p>
或者<p class='ui-border-t radius50'></p>
在手机端看的时候就会有线出现不了，这种写法目前也不是很完善的
我们可以利用伪元素加transform的scale来试下。
.bd-t{
position:relative;
}
.bd-t:after{content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
-webkit-transform: scaleY(.5);
transform:scaleY(.5);
}
.bd-r{
position:relative;
}
.bd-r:after{
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #e0e0e0;
-webkit-transform: scaleX(.5);
transform:scaleX(.5);
}
.bd-b{
position:relative;
}
.bd-b:after{
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
-webkit-transform: scaleY(.5);
transform:scaleY(.5);
}
.bd-l{
position:relative;
}
.bd-l:after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
background-color: #e0e0e0;
-webkit-transform: scaleX(.5);
transform:scaleX(.5);
}
用上面的写法就可以实现了，但是如果是低版本的手机就有问题了，
大家都知道transform的兼容性
所以说，要实现0.5px的实线，还需要进一步的研究中，大家如果有好的方法，可以积极讨论，甘愿受教。
网友评论