내 상자의 CSS에서 부분 테두리를 어떻게 만들 수 있습니까?

CSS 상자에 부분 테두리 선언

특정 섹션에만 테두리가 나타나는 CSS 상자를 만들면 시각적 매력을 높이고 유용성을 제공할 수 있습니다. . 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 요소는 메인 상자를 생성하고 div:after 의사 요소는 추가합니다. 하단 테두리. 이 기술은 성능이 저하되며 추가 마크업이 필요하지 않습니다.

여러 부분 테두리

동일한 상자에 여러 부분 테두리를 만들려면 다음과 함께 border-image 속성을 사용하세요. 슬라이스된 이미지를 소스로 사용합니다. 이를 통해 각 테두리 세그먼트의 위치와 크기를 지정할 수 있습니다.

div {
  width: 350px;
  height: 100px;
  background: url('image.png') no-repeat;
}

div:after {
  content: '';
  width: 350px;
  height: 1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: url('image.png') 60px 350px 5px 60px / 1px 1px;
}

요약하자면 CSS는 기본적으로 부분 테두리를 지원하지 않지만 이러한 기술은 우아하게 저하되고 시각적 디자인에 유연성을 제공하는 효과적인 솔루션을 제공합니다. 매력적인 박스 테두리 처리.

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