retina-border
实现移动端 1px 物理像素边框，可实现任意原生的边框，包含 less、stylus 版本
在 DPR = 2 的屏幕上会显示 0.5px CSS 像素，即 1px 物理像素。
在 DPR = 3 的屏幕上会显示 0.3333333px CSS 像素，即 1px 物理像素。
注意：
此方式是通过将元素的 before 伪类来实现 1px 物理像素边框的，因此元素的 before 不能再做他用，但是可以使用元素的 after 伪类。
Features
- 可以模拟出 原生 CSS 的所有形式的边框，边框大小最小可以达到 1px 物理像素
- 通过 继承 功能，最终产出的代码量最少
安装
NPM
npm install retina-border -S
通过 webpack 使用（需要结合 less-loader/stylus-loader）
// less
@import '~retina-border/src/less/index.less';
// stylus
@import '~retina-border/src/stylus/index.styl'
直接下载
文件说明
- index.less/styl：（满足常用需求）引入 core.less/styl，暴露了 上/下/左/右/全边框 的类名
- core.less/styl：（满足定制需求）retina-border 核心函数定义声明，如果有定制需求（比如同时需要 上下边框 或者 上下右边框），可跳过引入 index.less/stylus 直接引入 core.less/styl 函数，进入使用 retina-border 函数
使用
本工具提供一些常用的边框类型以供使用，其边框类型与类名（以及 less/stylus 函数）对应关系详见下表。
| 边框类型 | 类名 | less 函数 | stylus |
|---|---|---|---|
| 全 边框 | retina-border-all | #retina-border-all | retina-border-all |
| 上 边框 | retina-border-top | #retina-border-top | retina-border-top |
| 右 边框 | retina-border-right | #retina-border-right | retina-border-right |
| 下 边框 | retina-border-bottom | #retina-border-bottom | retina-border-bottom |
| 左 边框 | retina-border-left | #retina-border-left | retina-border-left |
通用方式：直接添加 类名，满足常用需求
这种方式可以满足一般需求，通过在 html 元素上添加类名，实现边框。
<div class="retina-border-all">全边框</div>
<div class="retina-border-top">上边框</div>
<div class="retina-border-right">右边框</div>
<div class="retina-border-bottom">下边框</div>
<div class="retina-border-left">左边框</div>
边框的默认设置为
- 边框宽度 border-width：1px
- 边框风格 border-style：solid
- 边框颜色 border-color：#e1e1e1
- 边框圆角 border-radius：0
调用 retina-border 核心函数，满足定制需求
- 某些场景下无法直接在 class 里添加类名，需要在（预处理）样式文件里添加边框
- 有其他边框需求，如想添加两条/三条边框，需要不同的 border-width/style/color等
如果遇到如下需求，可以直接调用 retina-border 函数，此种方式可以实现原生 CSS 的所有边框形式。
具体请参考：