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

테두리 딜레마: 모서리 테두리만 표시

요소의 모서리에만 국한된 테두리 선을 만드는 방법을 찾고 있다면 CSS를 사용하세요. 당신을 보호했습니다. 아래에서는 "마스킹"이라는 기술을 사용하는 솔루션을 안내해 드리겠습니다.

이 접근 방식에는 전체 요소에 대한 테두리를 정의한 다음 마스크를 적용하여 모서리를 제외한 테두리를 선택적으로 숨기는 작업이 포함됩니다. 이는 원추형 그라데이션() 및 선형 그라데이션() 함수를 사용하여 달성할 수 있습니다.

이를 수행하는 방법은 다음과 같습니다.

img {
  --s: 50px; /* Adjust this value to change the corner size */
  
  padding: 20px; /* Modify this value to alter the gap between the border and image */
  border: 5px solid #B38184; /* Change the border thickness and color as needed */
  -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;
}

원추형 그라데이션() 모서리를 제외하고 테두리를 숨기는 그라데이션을 생성하는 반면, 선형 그라데이션()은 테두리와 이미지 사이의 간격이 유지되도록 보장합니다. transparent.

--s 값을 조정하여 모서리 테두리의 크기를 제어할 수 있습니다. 위 예에서는 크기가 50px로 설정되어 모서리가 선명합니다.

이제 이 기술을 프로젝트에 통합하여 이미지 모서리나 기타 요소를 강조하는 시각적으로 매력적인 테두리를 만들 수 있습니다.

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