如何創建:分隔線

學習如何使用 CSS 創建不同的分隔線。

虛線


點線


實線


圓角


親自試一試

如何創建分隔線

第一步 - 添加 HTML:

<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">

第二步 - 添加 CSS:

/* 虛線邊框 */
hr.dashed {
  border-top: 3px dashed #bbb;
}
/* 點線邊框 */
hr.dotted {
  border-top: 3px dotted #bbb;
}
/* 實線邊框 */
hr.solid {
  border-top: 3px solid #bbb;
}
/* 圓角邊框 */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

親自試一試