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

질문 : CSS에서 테두리 불투명도를 설정할 수 있습니까?

---

이와 같은 요소의 테두리를 반투명하게 만드는 간단한 CSS 방법이 있습니까?

border-opacity: 0.7;

그렇지 않다면 이미지를 사용하지 않고 어떻게 할 수 있는지 아는 사람이 있습니까?

답변

---

불행히도 opacity 요소는 전체 요소 (텍스트 포함)를 반투명하게 만듭니다. 테두리를 반투명하게 만드는 가장 좋은 방법은 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 형식을 이해하지 못하고 이것이 전체 선언 인 경우 테두리를 전혀 표시하지 않는다는 것입니다. 해결책은 두 개의 테두리 선언을 제공하는 것입니다. 첫 번째는 가짜 불투명도와 두 번째는 실제입니다. 브라우저가 가능하면 두 번째를 사용하고 그렇지 않은 경우 첫 번째를 사용합니다.

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;"를 추가했습니다. 이 답변에 (댓글에 SooDesuNe의 제안에 따라) 단색 배경색이 적용 되더라도 테두리가 투명하게 유지되도록합니다.

출처 : https://stackoverflow.com/questions/4062001/can-you-set-a-border-opacity-in-css