retina-border
该工具基于 stylus 编写，解决移动端 1px 物理像素边框问题。
在 DPR = 2/3 的屏幕上会显示 0.5px/0.3333333px CSS 像素，即 1px 物理像素。
注意：此方式是通过将元素的 before 伪类先放大 200%/300%，再缩小为 0.5/0.3333，元素的 before 不能再做他用，但是可以使用元素的 after 伪类。
其他版本如下：
Features
- 可以模拟出 原生 CSS 的所有形式的边框，边框大小最小可以达到 1px 物理像素
- 通过 继承 功能，最终产出的代码量最少
文件说明
- index.styl：（解决常用需求）基于 core.styl，暴露了 上/下/左/右/全边框 的类名及函数
- core.styl：（解决定制需求）retina-border 核心函数定义声明，如果一般情况不能满足需求（比如同时需要 上下边框 或者 上下右边框），可通过直接引入 core.styl 函数，直接使用 retina-border 函数
使用方式
方式一：直接添加 类名，满足常用需求
这种方式可以满足一般需求，通过在 html 元素上添加类名，实现边框。
| 边框类型 | 类名 |
|---|---|
| 上边框 | retina-border-top |
| 右边框 | retina-border-right |
| 下边框 | retina-border-bottom |
| 左边框 | retina-border-left |
| 全边框 | retina-border-all |
引入方式
@import 'retina-border/index.styl'
使用方式
<div class="retina-border-all">全边框</div>
<div class="retina-border-top">上边框</div>
<div class="retina-border-tr">上-右边框</div>
方式二：调用 retina-border 核心函数，满足自定义需求
如果我们想同时添加 两条/三条 边框的类名，或者想直接调用 stylus 函数而不是添加类名，可以直接调用 retina-border 函数。
此种方式可以实现原生 CSS 的所有边框形式。
retina-border 参数说明
retina-border 函数的参数依次为：
- borderWidth：边框宽度，默认为 1px
- borderStyle：边框类型，默认为 solid
- borderColor：边框颜色，默认为 rgba(0, 0, 0, .08)
- borderRadius：边框圆角，默认为 0
需要注意的是：
- 这些参数的值的写法跟原生 CSS 完全一致，比如 borderWidth: 1px 0 代表只有上下边框
- 如果 borderRadius 存在，会给该元素添加 border-radius 声明，且边框的 border-radius 会自动匹配 DPR
引入方式
@import 'retina-border/core.styl'
使用方式
- 按序传参，末尾的参数可省略（省略的话会取默认值）
.bottom-right-border
retina-border(0 1px 1px 0, dashed, green, 10px)
.bottom-right-border
retina-border(0 1px 1px 0, dashed, green)
.bottom-right-border
retina-border(0 1px 1px 0, dashed)
.bottom-right-border
retina-border(0 1px 1px 0)
- 传入参数的关键字，可不按序
.border-all-with-radius
retina-border(borderRadius: 50px)
.border-all-dashed
retina-border(borderStyle: dashed)
.bottom-all-blue
retina-border(borderColor: blue)
.top-left-border
retina-border(borderWidth: 10px 0 0 10px)