[CSS] 같은 색상의 border와 background-color가 다르게 나타나는 현상 - background-clip

border와 background-color를 설정했을 때 같은 색상으로 설정했음에도 border가 더 진하게 보이는 현상이 발생하는 경우가 있다.

.box{
  width: 100px;
  height: 50px;
  background-color: rgba(58, 58, 58, .2);
  border: 1px solid rgba(58, 58, 58, .2);
}

border와 background-color를 rgba(58,58,58,0.2)로 같게 설정했지만 border는 background-color보다 더 진하게 보인다. 이는 background-clip 속성과 관련이 있다.

👻 background-clip

HTML 요소는 box로 이루어져있는데 background-clip은 배경 이미지나 배경색을 박스의 요소 가운데 어느 곳에 포함시킬 것인지 정하는 속성이다.

• border-box : 테두리 영역과 그 안쪽 영역을 채움, 기본값 ( border + padding + content )
• padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채움 ( padding + content )
• content-box : 내용 영역과 그 안쪽 영역을 채움 ( content )
• initial : 기본값
• inherit : 부모 요소의 속성값을 상속받음

background-clip은 기본값으로 border-box가 적용된다. 따라서 background-color가 border 영역 아래 부분을 차지하게 된다. 따라서 opacity가 설정된 값에서 border는 색이 겹쳐지는 현상이 발생해 색이 더 진하게 보이게 된다. opacity가 설정되지 않은 색상에서는 이러한 현상이 일어나지 않지만 opacity가 설정되면서 색이 겹침에 따라 색상이 더 진해지게 되기 때문에 위와 같은 현상이 발상하게 되는 것이다.

따라서 `background-clip` 속성을 `padding-box`나 `content-box`로 설정하면 border와 background-color가 원하는 대로 보이는 것을 확인할 수 있다.