CSS에서 부분 테두리를 어떻게 만들 수 있나요?

CSS의 부분 테두리: 창의적인 환상

특정 측면에만 나타나거나 확장되는 테두리가 있는 상자를 만드는 것이 바람직할 수 있습니다. 부분적으로 가장자리를 가로지릅니다. CSS에서 직접적인 지원이 없음에도 불구하고 이 효과는 간단하고 유연한 방법을 통해 우아하게 구현할 수 있습니다.

예를 들어 왼쪽에서 60px만 확장되는 하단 테두리가 있는 350px 너비의 상자를 생각해 보세요. 이는 다음 CSS 코드를 사용하여 복제할 수 있습니다.

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}

마법은 div:after 의사 요소에 있습니다. 기본 상자의 맨 아래에 절대적으로 위치하는 빈 상자를 만듭니다. 너비와 하단 속성을 조정하여 부분 테두리의 크기와 위치를 제어할 수 있습니다.

이 접근 방식은 다목적이며 모든 최신 브라우저에서 잘 작동합니다. 추가 마크업이 필요하지 않으므로 코드가 깔끔하고 유지 관리 가능합니다. 또한 position:absolute를 지원하지 않는 브라우저에서는 성능이 정상적으로 저하됩니다.

위 내용은 CSS에서 부분 테두리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!