CSS에서 반투명 테두리를 어떻게 만듭니까?

CSS에서 반투명 테두리를 설정하는 방법

CSS에서 불투명도 속성을 설정하면 요소를 포함한 전체 요소의 투명도에 영향을 줍니다. 텍스트. 반투명 테두리를 만드는 경우 간단한 접근 방식을 사용할 수 없습니다. 그러나 rgba 색상 형식을 사용하면 이 효과를 얻을 수 있습니다.

예를 들어 다음 코드는 50% 불투명한 빨간색 테두리를 설정합니다.

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

rgba를 지원하지 않는 브라우저의 경우 (IE8 이하) 이중 국경 전략이 필요합니다. 첫 번째 테두리는 가짜 불투명도로 설정되고 두 번째 테두리는 실제 원하는 불투명도를 나타냅니다.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

첫 번째 테두리는 흰색 위에 50% 불투명한 빨간색 테두리를 시뮬레이션하여 대부분의 브라우저에서 원하는 효과를 만듭니다.

단색 배경색으로도 테두리가 투명하게 유지되도록 하려면 background-clip: padding-box; 위의 예시와 같습니다.

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