3
回答
【征集】如何实现移动浏览器 0.5像素的边框
滴滴云服务器,限时包月0.9元,为开发者而生>>>   

简要:征集 css3 +div 实现移动浏览器 0.5像素的边框

要求:入侵性小

问题详述:

1. 在PC浏览器下, border-width:1px, 就是一个屏幕像素(高分屏/改过分辨率等特殊情况除外),在移动浏览器下,网页(移动版)实际上会放大显示(假设一般是2x),这使得实际使用了2个像素 回执了 一个1px的边框

2. 为什么要实现这种边框? 因为移动浏览器下 使用 0.5px 的边框整体效果真的很好,好过1px的N个数量级

3. 举例: 淘宝(有些人觉得应该打码,实际上没必要,因为普及率很高了,打码无意义) 的 APP 目测就是 加壳的,它的边框就是 0.5px 的效果,真的很赞

已有方案

1.  原理: 将目标Node 设置两倍大小, 然后通过 `transform: scale(0.5, 0.5);` 缩回来

例:


.thinner-border {
    width: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    ...
}
优点:实现了效果,仅此而已


缺点: 入侵性很差, 很容易破坏布局,且会影响font-size margin padding等,不易通用

2. 原理类同1,放大缩放的 :before :after

.thin-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

优点: 相对于 Point.1, 对外部布局影响要小得多;不会影响font-size margin padding等

缺点: 需要设置 `position:` 通用性上比较不现实;border-color定制起来麻烦; 和其他通过 :before :after 实现个 icon clear css-raty 什么的方案冲突

via:  http://www.ayqy.net/blog/css3%E5%AE%9E%E7%8E%B0%E5%8D%8A%E5%83%8F%E7%B4%A0%E8%BE%B9%E6%A1%86/

2. 通过 background-size 来缩放, 不赘述

http://www.daqianduan.com/5935.html

N.  尝试发现 PC 版 Firefox41 支持 border: 0.5px soild #000; 网页放大200% 就可以显示全并对比出来

综上: 以上方法多多少少不够完美

=======  更多方案会在“问题补充”里补充  =======


<无标签>
举报
zqq90
发帖于2年前 3回/1K+阅

以下是问题补充:

  • @zqq90 :Firefox for Android 支持 `border-width: 0.5px` (2年前)
顶部