# STYLE

**Repository Path**: funren/style

## Basic Information

- **Project Name**: STYLE
- **Description**: 常用css样式集合
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-27
- **Last Updated**: 2021-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: CSS

## README

# STYLE 常用css样式集合


## 一、reset
* 移动端基础样式重置
（建议配合 normalize.css 使用）

### 1、安装插件

```js
// 安装 normalize 包
cnpm i normalize.css -S

// 安装 reset 包
npm install @funren/reset.css -S
```

### 2、引入插件

```js
// main.js 中引入 normalize 与 reset
import 'normalize.css/normalize.css';
import "@funren/reset.css";
```


----------------------

##  二、border-1px
* 解决移动端 1像素边框问题；

### 1、安装插件

```
// 下载 npm 包
npm install @funren/border-1px -S
```

### 2、引入插件

> border-1px 支持 scss 或 css 两种使用方式；

#### scss 方式引入

* 局部引入

```js
// home.vue
// Vue 项目中局部引入 
<template>
  <div id="app">
      <div class="box">scss 方式添加边框</div>
  </div>
</template>

<style lang="scss">
@import "~@funren/border-1px";

.box {
  @include border-1px(red , 0.1 , 3px) 
</style>
```

* 全局引入

```js
// vue.config.js
// Vue 项目中全局引入

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 全局引入scss文件
        prependData: `@import "@funren/border-1px";`
      }
    }
  }
};
```

* 插件使用

    * scss方式引入，支持 scss 混入（可自定义边框色、透明度、圆角）和  class 类名，两种使用方式；
    * **适用范围**：不支持表单元素 input、select、textarea
    * scss @minxi 方式引入接收 2~3 个可选参数；可自定义边框颜色、边框透明度、圆角（全边框可设置）

| SCSS @minxi 方法使用 （接收三个可选参数） |  边框色设置  | 透明度设置 | 圆角设置  | 作用 |
| - |:-:|:-:|:-:|:-:|
| @include border-top-1px(color,alpha)    | true |true （范围：0~1）|false| 上边框 |
| @include border-bottom-1px(color,alpha) | true |true （范围：0~1）|false| 下边框 |
| @include border-left-1px(color,alpha)   | true |true （范围：0~1）|false| 左边框 |
| @include border-right-1px(color,alpha)  | true |true （范围：0~1）|false| 右边框 |
| @include border-1px(color,alpha,radius) | true |true （范围：0~1）|true| 全边框 |

```css
/* scss 混入方式使用 */
<style lang="scss">
  .box {
      @include border-1px(red,0.1,3px)
  }
</style>
```



#### css方式引入

* 全局引入

```js
// main.js
// Vue 项目全局引入
import '@funren/border-1px/css/border-1px.min.css';
// 或
<link type="text/css" href="border-1px/css/border-1px.min.css"></link>


<div id="app">
    <div class="border-top-1px">css 方式添加边框</div>
</div>
```

* 插件使用
    * css方式引入，仅支持 class 类名方式使用；
    * **适用范围**：不支持表单元素 input、select、textarea

| CSS 样式          | 作用    | 是否支持 input、select、textarea |
| ----------------- | ---------------------------|-------------- |
| border-top-1px    | 上边框 | false |
| border-bottom-1px | 下边框 | false |
| border-left-1px   | 左边框 | false |
| border-right-1px  | 右边框 | false |
| border-1px        | 全边框 | false |
| from-border-1px   | 全边框 | true |

```html
<div class="border-top-1px"></div>
```