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

CSS의 부분 상자 테두리

CSS에서는 부분적으로만 확장되는 테두리가 있는 상자를 직접 생성할 수 없습니다. 상자. 그러나 영리한 해결 방법을 사용하면 비슷한 효과를 얻을 수 있습니다.

부분 테두리 만들기

이 기술에는 원하는 크기와 배경색으로 컨테이너 div를 만드는 작업이 포함됩니다. 이 div 내에는 :after 선택기를 사용하여 더 작은 의사 요소가 배치됩니다. 이 의사 요소는 부분 테두리를 나타내며 그에 따라 위치와 크기가 지정됩니다.

예를 들어 하단에 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;
}

이 접근 방식은 테두리 크기, 위치 및 색상 측면에서 유연성을 제공합니다. 또한 브라우저에서 의사 요소를 지원하지 않는 경우 부분 테두리 없이 간단한 상자를 표시하여 우아한 성능 저하를 보장합니다.

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