html5单个标签实现分隔线,666，看hr标签实现分隔线如何玩
出花
⽇常开发经常会⽤到⽹页分隔线，例如列表下拉到最后，类似于“我是有底线的”这样的提⽰，就会伴随分隔线。
通常，这样的分隔线是使⽤
标签模拟的，其实我们可以使⽤语义更好的
标签模拟。
HTML
元素虽然是⼀个⾮闭合标签，但是也是⽀持::before和::after伪元素的。
因此，我们可以使⽤
标签实现各种样式的分隔线效果。
⼀、基础分隔线效果
实线
相关HTML和CSS代码如下所⽰：
.hr-solid {
border: 0;
border-top: 1px solid #d0d0d5;
}
实时渲染效果如下：
scanf报错点线(1px和2px)
相关HTML和CSS代码如下所⽰，使⽤的是浏览器默认效果，因此，不同浏览器下看到的虚点的细节可能会有所差异：
.hr-dotted {
border: 0;
border-top: 1px dotted #a2a9b6;
}
.hr-dotted2 {
border: 0;
border-top: 2px dotted #a2a9b6;
}
实时渲染效果如下：
虚线(1px和2px)
怎么卸载mariadb数据库相关HTML和CSS代码如下所⽰，同样的，浏览器默认虚线样式，不同浏览器表现细节有差异：
.hr-dashed {
border: 0;
border-top: 1px dashed #a2a9b6;
}
.hr-dashed2 {
border: 0;
border-top: 2px dashed #a2a9b6;
}
实时渲染效果如下：
双实线
相关HTML和CSS代码如下所⽰：
.hr-double {
border: 0;
border-top: 3px double #d0d0d5;
}
实时渲染效果如下：
疏密可控的虚线
这⾥使⽤线性渐变模拟虚线效果，优点是虚线的虚实⽐例是可以精确控制的，实现原理和细节以前介绍过，可参见“CSS3 linear-gradient 线性渐变实现虚线”⼀⽂。
现在有如下所⽰的HTML和CSS代码：
.hr-dashed-fixed {
border: 0;
padding-top: 1px;
background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 10px);
实时渲染效果如下：
这⾥，为了⽅便⼤家使⽤，我⼜使⽤CSS变量，把虚线实线⽐例做成可配置的了。
其中--dashed-filled是实线尺⼨，变量--dashed-filled是虚线的尺⼨，代码⽰意：
.hr-dashed-fixed {
border: 0;
padding-top: 1px;
/* for 现代浏览器 */
background: repeating-linear-gradient(to right, #a2a9b6 0 var(--dashed-filled, 4px), transparent 0 calc(var(--dashed-filled, 4px) + var(--dashed-open, 6px)));
}
实时渲染结果如下，只有在现代浏览器中才有效果，因为IE不⽀持CSS变量，因此，IE浏览器⽆效。
为了全兼容，⼤家可以把上⾯两段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渐变模拟的，相关HTML和CSS代码如下所⽰：
.hr-edge-weak {
border: 0;
padding-top: 1px;
background: linear-gradient(to right, transparent, #d0d0d5, transparent);
it培训机构哪个比较好}
实时渲染效果如下所⽰：
斜纹分隔线
有时候需要分界线更加明显的分隔线，则可以试试下⾯的代码，对应的效果是斜纹分隔线。
.hr-twill {
border: 0;
padding: 3px;
background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
}
效果如下：
我们也可以让斜纹表现为多彩的颜⾊，这⾥使⽤了遮罩实现，HTML和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 text-decoration实现宽度100%波浪线效果”。
这⾥演⽰使⽤的前端代码则是：
.hr-wavy {
border: 0;
color: #d0d0d5;
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;
}
效果体验：
阴影线
这个实现⽐较简单，就是使⽤CSS box-shadow盒阴影属性，多⽤在表⽰层次的分隔场景中。相关HTML和CSS代码如下所⽰：
.hr-shadow {
border: 0;
padding-top: 10px;
color: #d0d0d5;
border-top: 1px solid rgba(0,0,0,.1);
box-shadow: inset 0 10px 10px -10px;
}
带阴影的分隔线效果如下：
⼆、带点图形装饰的分隔线
这⾥主要演⽰⼏个⽣产环境可以使⽤的⼏个样式，那些花⾥胡哨的分隔线这⾥就不展⽰了。
html个人网页完整代码怎么看中间有装饰
中间有⼀些图形或图像，实现原理⼤同⼩异，这⾥使⽤圆和⽅块抛砖引⽟⽰意下。
这⾥的线条使⽤CSS渐变绘制，⽽中间的图形就需要借助伪元素实现了。
.hr-mid-circle,
.
hr-mid-square {
border: 0;
color: #d0d0d5;
background: linear-gradient(currentColor, currentColor) no-repeat center; background-size: 100% 1px;
}
.hr-mid-circle::before {
content: '';
display: block;
width: .75em; height: .75em;
border-radius: 50%;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。