CSS中有多种方法可以创建分割线,让我们一一介绍:
hr { border-top: 1px solid #999; }
第一个是使用HTML提供的水平分割线(<hr>)元素。可以使用CSS属性对其进行样式修改。
hr { width: 50%; border: none; border-top: 3px solid #999; }
第二种方法是使用CSS对HTML的水平分割线(<hr>)元素进行样式化。通过对 border-top 属性进行修改可以调整分割线的高度,通过对 border-left 和 border-right 属性进行修改可以调整分割线的长度,通过对 border-color 属性进行修改可以调整分割线的颜色。
.dashed-line { border-top: dashed 2px #999; }
第三种方法是使用 CSS 中的border-style属性来创建虚线/点状线分割线。可以使用如 "dashed"、"dotted" 等等值来实现。
div { width: 100%; height: 2px; background-color: #999; position: relative; } div:after { content: ""; position: absolute; top: 50%; left: 50%; height: 10px; width: 10px; background-color: #fff; border: 2px solid #999; border-radius: 50%; transform: translate(-50%, -50%); }
第四种方法是通过伪元素 :before 或 :after 来实现。可以利用其添加自定义内容并利用 CSS 来对其进行样式修改。在代码中,我们使用 :after 伪元素来添加一个圆形样式,作为分割线的末端。