这是一条普通的HTML
分割线
<hr class="line1">
两条实线
.line1{ border: 0; border-bottom: 3px double; }
一条虚线
.line1{ border: 0; border-bottom: 1px dotted; }
一条可控线段长度与间距的虚线
.line1{ border: 0; padding-top: 1px; background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 10px); }
两端淡出的分割线
.line1{ border: 0; padding-top: 1px; background: linear-gradient(to right, transparent, #d0d0d5, transparent); }
斜纹分隔线
.line1{ border: 0; padding: 3px; background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px); }
炫丽的斜纹分隔线
.line1{ 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); }
波浪线
.line1 { border: 0; color: #d0d0d5; height: .5em; white-space: nowrap; letter-spacing: 100vw; padding-top: .5em; } .line1::before { content: "\2000\2000"; text-decoration: overline wavy; }
阴影线
.line1 { border: 0; padding-top: 10px; color: #d0d0d5; border-top: 1px solid rgba(0,0,0,.1); box-shadow: inset 0 10px 10px -10px; }
中心图形装饰分隔线
.line1 { border: 0; color: #d0d0d5; background: linear-gradient(currentColor, currentColor) no-repeat center; background-size: 100% 1px; } .line1::before { content: ''; display: block; width: .5em; height: .5em; transform: rotate(45deg); background-color: currentColor; margin: 3px auto; }
两端图形装饰分隔线
.line1 { border: 0; color: #d0d0d5; background: linear-gradient(currentColor, currentColor) no-repeat center; background-size: calc(100% - 1.5em - 6px) 1px; display: flex; justify-content: space-between; } .line1::before, .line1::after { content: ''; display: block; width: .75em; height: .75em; transform: rotate(45deg); box-sizing: border-box; border: 1px solid; margin: 3px; }
复杂装饰分隔线
.line1 { color: #d0d0d5; border: double; border-width: 3px 5px; border-color: #d0d0d5 transparent; height: 1px; overflow: visible; margin-left: 20px; margin-right: 20px; position: relative; } .line1:before, .line1:after { content: ''; position: absolute; width: 5px; height: 5px; border-width: 0 3px 3px 0; border-style: double; top: -3px; background: radial-gradient(2px at 1px 1px, currentColor 2px, transparent 0) no-repeat; } .line1:before { transform: rotate(-45deg); left: -20px; } .line1:after { transform: rotate(135deg); right: -20px; }
带文字的分隔线
这里的HTML
部分要增加一个data-
属性用来配置文字
<hr class="line1" data-content="分隔线">
然后CSS
:
.line1 { color: #a2a9b6; border: 0; font-size: 12px; padding: 1em 0; position: relative; } .line1::before { content: attr(data-content); position: absolute; padding: 0 1ch; line-height: 1px; border: solid #d0d0d5; border-width: 0 99vw; width: fit-content; /* for 不支持fit-content浏览器 */ white-space: nowrap; left: 50%; transform: translateX(-50%); }
学习自: https://www.zhangxinxu.com/wordpress/2021/05/css-html-hr/