CSS를 사용하여 상자의 부분 테두리를 어떻게 만들 수 있습니까?

CSS에서 상자 부분 테두리 만들기

CSS에서는 특정 크기나 부분 적용 범위의 상자 테두리를 직접 선언하는 것이 불가능합니다. 그러나 이 효과를 효과적으로 재현하는 대체 접근 방식이 있습니다.

해결책:

상자에 일반 CSS 테두리를 만들고 CSS로 위치를 지정하는 하위 요소를 추가합니다. 테두리를 원하는 길이로 확장합니다. 예는 다음과 같습니다.

.box {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
  border: 1px solid black;
}

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

HTML:

<div class="box"></div>

이 코드는 일반 검은색 테두리와 추가로 60px 길이의 회색 막대가 있는 상자를 만듭니다. 부분 테두리를 효과적으로 시뮬레이션합니다. 이 기술은 CSS 위치 지정을 지원하지 않는 이전 브라우저에서 성능이 저하됩니다.

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