이미지를 사용하지 않고 CSS에서 반투명 테두리를 어떻게 만들 수 있나요?

CSS에서 요소 테두리의 불투명도

CSS에서 border-opacity: 0.7과 같은 속성을 사용하여 요소 테두리에 대해 반투명 효과를 얻을 수 있나요? ? 이러한 속성은 존재하지 않지만 이미지를 사용하지 않고 이 효과를 얻을 수 있는 대체 솔루션은 다음과 같습니다.

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

첫 번째 선언은 흰색 배경 위에 50% 불투명한 빨간색 테두리로 그 아래의 모든 그래픽을 덮습니다.

추가 고려 사항

배경 클립: 패딩 상자; 속성을 사용하면 단색 배경색이 적용되어도 테두리가 투명하게 유지됩니다.

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