구분선을 어떻게 만드는가:

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;
{}

직접 테스트해 보세요