요소 불투명도에 영향을 주지 않고 반투명 테두리를 만들려면 어떻게 해야 합니까?

요소 불투명도에 영향을 주지 않고 CSS 테두리 투명성을 적용할 수 있나요?

CSS에는 border-opacity 속성이 없습니다. 이는 투명한 요소 콘텐츠의 단점 없이 반투명 테두리를 만드는 방법에 대한 의문을 제기합니다.

rgba 색상 형식을 사용하는 솔루션

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 */
}

첫 번째 테두리는 가짜 불투명도를 제공합니다. , 두 번째 테두리는 원하는 투명도로 실제 테두리를 정의합니다. 최신 브라우저는 첫 번째 테두리를 무시하지만 이전 브라우저는 이를 사용하여 투명도를 에뮬레이트합니다.

Background-clip 속성

경계가 투명하게 유지되도록 하려면 단색 배경색이 적용되고, background-clip: padding-box; 예제에 속성이 추가되었습니다. 이렇게 하면 배경이 테두리 투명도에 영향을 미치는 것을 방지할 수 있습니다.

위 내용은 요소 불투명도에 영향을 주지 않고 반투명 테두리를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!