# stylus-retina-border

> 解决移动端 1px 物理像素边框问题，stylus 版本

Latest version **1.0.0** (published 2017-06-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install stylus-retina-border
pnpm add stylus-retina-border
yarn add stylus-retina-border
bun add stylus-retina-border
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-06-18 |
| First published | 2017-06-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wind-stone |
| Maintainers | wind-stone |
| Keywords | border, retina, stylus |

## Links

- npm: https://www.npmjs.com/package/stylus-retina-border
- Repository: https://github.com/wind-stone/retina-border/tree/master/stylus-retina-border
- npm.io page: https://npm.io/package/stylus-retina-border

## Recent versions

- 1.0.0 (latest) — 2017-06-18

## README

# retina-border

该工具基于 stylus 编写，解决移动端 1px 物理像素边框问题。

在 DPR = 2/3 的屏幕上会显示 0.5px/0.3333333px CSS 像素，即 1px 物理像素。

注意：此方式是通过将元素的 before 伪类先放大 200%/300%，再缩小为 0.5/0.3333，元素的 before 不能再做他用，但是可以使用元素的 after 伪类。

其他版本如下：
- [less-retina-border](https://www.npmjs.com/package/less-retina-border)


## 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)
```

## 版本更新

---
_Source: https://npm.io/package/stylus-retina-border · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._