如何使用CSS实现由大圆点组成的<hr>分隔线效果

你原有代码无法实现目标效果主要有两个问题：

• size 是HTML原生属性，写在行内CSS样式中不会生效
• 直接全局设置border-style: dotted会给hr的四个边都加上点状边框，且没有限制元素总宽度，无法得到少量大圆点的效果

调整后的代码如下：

<hr style="border: none; border-top: 6px dotted #EAF6F6; width: 6%; margin: 20px auto;">

各配置项作用说明：

• border: none：先清除hr自带的默认边框样式，避免多余样式干扰
• border-top: 6px dotted #EAF6F6：仅保留顶部边框，设置为点状样式，其中6px控制圆点的大小，数值越大圆点越大，可根据需求调整
• width: 6%：控制hr元素的总宽度，数值越小显示的圆点数量越少，调整这个参数即可得到你需要的圆点个数
• margin: 20px auto：让分隔线水平居中，修改20px即可调整分隔线和上下内容的间距

内容的提问来源于stack exchange，提问作者Onizuka92