css实现0.5px的线或边框

首先要说明的是，为什么会有 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上有看过，感觉用起来很骚。有需要的朋友可以到网上找找。

后言：

如果大家还有更好的方法，请留言告诉我！(^_^)

总结出以下几种解决方法：

1px线原始图

0.5px线缩放图

后言：

--发表评论--