웹디자인 반투명 경계선 border hals 적용 css, 흰색배경에 반투명 경계선 문제

빨간색 배경에 흰색 경계선 스타일이라고 해보자.

 

border:10px solid hsla(0,0%,100%,.5);
background:white;

 

hsla 경계선을 만들어준다 했는데 경계선으로 나오지 않는다

적용이 되지 않은건 아니고  배경이 경계선 영역 아래로 확장된 것이다.

흰색배경에 반투명 경계선이면 아예 적용이 안된 것처럼 보일것이다.

 

그래서 이렇게 적용해준다.

 

border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;

 

패딩 padding 모서리에서 배경을 자라내도록 하는 것으로

배경이 경계선 아래로 확장되는것이 싫을때도 이렇게 적용하면 된다.

 

 

background-clip:padding-box;

border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.

padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.

content-box : 내용 영역과 그 안쪽 영역을 채웁니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.