## 基础分隔线
一条黑色实线
``` 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);
}
```