이미지를 사용하지 않고 CSS에서 반투명 테두리를 만드는 방법은 무엇입니까?

이미지 없는 CSS 테두리 투명도

안타깝게도 CSS에는 테두리 불투명도 속성이 없습니다. 그러나 다른 방법을 사용하여 반투명 테두리를 만드는 기술이 있습니다.

rgba 색상 형식

rgba를 사용하여 반투명 테두리를 만들려면 다음 구문을 사용하세요. :

div {
    border: 1px solid rgba(red, green, blue, opacity);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for modern browsers */
}

예를 들어 다음과 같이 rgba를 사용하여 불투명도 50%의 빨간색 테두리를 만들 수 있습니다.

div {
    border: 1px solid rgba(255, 0, 0, .5);
}

이중 테두리 선언(이전 브라우저의 경우)

IE8 이하와 같이 rgba를 지원하지 않는 브라우저의 경우 해결 방법은 두 개의 테두리 선언을 사용하는 것입니다.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
}

첫 번째 선언은 가짜 불투명도를 제공하고 두 번째 선언은 가짜 불투명도를 제공합니다. 실제 불투명도를 사용합니다. 최신 브라우저는 두 번째 선언에 우선순위를 두는 반면, 이전 브라우저는 첫 번째 선언을 사용합니다.

참고: background-clip: padding-box 속성은 배경이 선언될 때 테두리가 투명하게 유지되도록 추가됩니다. 색상이 적용되었습니다.

위 내용은 이미지를 사용하지 않고 CSS에서 반투명 테두리를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!