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

CSS로 모서리 테두리 만들기

CSS에서는 요소의 모서리에만 테두리를 표시하여 독특한 모양을 얻을 수 있습니다. 이 효과는 디자인에서 장식 프레임을 만들거나 특정 영역을 강조하기 위해 흔히 사용됩니다.

CSS 솔루션

다음은 모서리만 생성하는 코드 스니펫입니다. borders:

img {
  --s: 50px; /* the size on the corner */
  
  padding: 20px; /* the gap between the border and image */
  border: 5px solid #B38184; /* the thickness and color */
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
}

설명

이 솔루션은 -webkit-mask 속성을 활용하여 원뿔형 그라데이션을 생성합니다. 그라데이션은 두 개의 서로 다른 색상 정지점, 즉 모서리(75%)와 시작 부분(0%)에 하나씩 정의됩니다. 이 마스크를 적용하면 모서리를 제외하고 테두리가 효과적으로 숨겨집니다.

수정

모서리의 크기를 조정하려면 -- s 변수입니다. 또한 테두리 두께와 색상을 원하는 대로 맞춤 설정할 수 있습니다.

대체 솔루션

PureCSS와 같은 일부 CSS 라이브러리는 사전 모서리 전용 테두리에 대한 CSS 클래스를 구축했습니다. 이 접근 방식은 코드를 더욱 단순화합니다.

img {
  border-radius: 10px;
}

.border-corner-only {
  border-width: 0px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-bottom-width: 0px;
  border-left-width: 5px;
}

border-corner-only 클래스를 사용하여 요소에 이미지를 래핑하면 복잡한 마스킹 기술 없이도 모서리 테두리를 쉽게 적용할 수 있습니다.

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