分隔线集合

## 基础分隔线

一条黑色实线

``` html

<hr />

```

### 点线

``` css

/* 点线 */

.hr-dotted {

    border: 0;

    border-top: 2px dotted #000;

}

```

### 虚线

``` css

/* 虚线 */

.hr-dashed {

    border: 0;

    border-top: 2px dashed #000;

}

```
 

### 双实线

``` css

.hr-double {

    border: 0;

    border-top: 3px double #000;

}

```

### 疏密可控虚线

``` css

.hr-dashed-fixed {

    border: 0;

    padding-top: 1px;

    background: repeating-linear-gradient(to right, #000 0px, #000 4px, transparent 0px, transparent 10px);

```

使用CSS变量将虚线实线比例做成可配置

``` html

<hr class="hr-dashed-fixed" style="--dashed-filled: 6px; --dashed-open: 5px;">

```

``` css

.hr-dashed-fixed {

    border: 0;

    padding-top: 1px;

    /* for IE浏览器 */

    background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 10px);

    /* for 现代浏览器 */

    background: repeating-linear-gradient(to right, #a2a9b6 0 var(--dashed-filled, 4px), transparent 0 calc(var(--dashed-filled, 4px) + var(--dashed-open, 6px)));

}

```

**CSS变量完整语法**：`var( [, ]? )`，用中文表示就是：`var( <自定义属性名> [, <默认值 ]? )`

意思就是：如果我们使用的变量没有定义（注意，仅限于没有定义），则使用后面的值作为元素的属性值。

ps：如果变量值不合法，默认值代替

### 斜纹线

``` css

.hr-twill {

    border: 0;

    padding: 3px;

    background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);

}

```

使用遮罩让斜纹变成彩色

``` css

/* 现代浏览器only */

.hr-twill-colorful {

    border: 0;

    padding: 3px;

    background: linear-gradient(135deg, red, orange,green, blue, purple);

    --mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 6px);

    -webkit-mask-image: var(--mask-image);

    mask-image: var(--mask-image);

}

```

效果如下：

### 波浪线

``` css

.hr-wavy {

    border: 0;

    color: #000;

    height: .5em;

    white-space: nowrap;

    letter-spacing: 100vw;

    padding-top: .5em;

}

.hr-wavy::before {

    content: "\2000\2000";

    /* IE浏览器实线代替 */

    text-decoration: overline;

    /* 现代浏览器 */

    text-decoration: overline wavy;

}

```

## 带文字的分隔线

### 两端实现

``` html

<hr class="hr-solid-content" data-content="分隔线">

```

``` css

.hr-solid-content {

    color: #000;

    border: 0;

    font-size: 12px;

    padding: 1em 0;

    position: relative;

}

.hr-solid-content::before {

    content: attr(data-content);

    position: absolute;

    padding: 0 1ch;

    line-height: 1px;

    border: solid #000;

    border-width: 0 99vw;

    width: fit-content;

    /* for 不支持fit-content浏览器 */

    white-space: nowrap;

    left: 50%;

    transform: translateX(-50%);

}

```

### 两端虚线

在两端实线基础上加渐变

``` html

<hr class="hr-solid-content hr-solid-content" data-content="分隔线">

```

``` CSS

.hr-dashed-content::before {

    border-image: repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 2px) 0 85% 0 repeat;

}

```

### 两端淡出

在两端实线基础上加遮罩

``` html

<hr class="hr-solid-content hr-fade-content" data-content="分隔线">

```

``` css

.hr-fade-content {

    -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);

    mask-image: linear-gradient(to right, transparent, black, transparent);

}

```