首先要说明的是,为什么会有 0.5px 线的需求呢?原因是该死的这个ui,某一天跑过来跟我说,你这个线怎么这么粗呢?what?当时我还没看出来,结果一细看,好像真的是那么回事,为啥搞那么粗?能不能改细一点(原来是 1px,要求改 0.5px)?
接下来,就开始了我求学之路了!
作为一个专业的前端,这是个问题吗?啥事情都不是,不就是改成0.5px吗?so easy!
一句代码:
border: 0.5px solid #ccc
改好,提交代码,测试!嗯,不到两分钟,测试跑过来说,干啥呢,耍我啊!你这个真的修改了吗,怎么问题更大了呢?嗯???。。。。
好吧,我承认是在下错了,原来这行代码,在 iphone 下是很好的呈现的,但是在 android 下的浏览器会把 0.5 识别为 1px 或者 0。
在ui强烈的要求下,同时本着一个前端的探索精神,再次走上采坑之路!
总结出以下几种解决方法:
- 只兼容ios
border: 0.5px solid #ccc
- 利用css3的缩放实现,兼容性强(推荐使用)
原理:1px 缩放 50% 达到 0.5px 效果
<div class="border">
<div class="content">
利用scale,以及伪类实现的0.5px边框,
为什么利用伪类进行缩放呢?
因为直接对元素进行缩放,会把内容也会进行缩放,影响内容的表现。
</div>
</div>
.border {
position: relative;
}
.border:before {
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid red;
transform-origin: 0 0; /* 以左上角为基点 */
transform: scale(.5, .5); /* 缩放50% */
box-sizing: border-box;
}
1px线原始图
0.5px线缩放图
您可以猛锤这里:css实现0.5px线或边框-demo
- 怒怼ui,图片背景大法
原理:图片规格,设置高度2px,线的像素高度为1px,然后利用border中的1px对图片进行压缩,形成缩放,达到0.5px的效果。
border-width: 1px 0 0 0;
border-image: url(border.png) 2 0 stretch;
- 背景色渐变
我在某移动ui上有看过,感觉用起来很骚。有需要的朋友可以到网上找找。
后言:
如果大家还有更好的方法,请留言告诉我!(^_^)
- 本文链接:http://www.lizc.me/blog/articles/5c40004fea47aa001f572583
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!