box shadow

box shadow는 요소의 테두리를 감싼 그림자 효과를 추가하는 속성이다.

box shadow 효과

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

• horizontal offset : 수평방향으로 움직이며 수치를 + 를 줄수록 그림자가 상자 오른쪽으로 생성되고 - 는 그 반대로 생성된다.
• horizontal offset : 수직방향으로 움직이며 수치를 + 를 줄수록 그림자가 상자 오른쪽으로 생성되고 - 는 그 반대로 생성된다.
• blur radius : 0으로 설정시 그림자가 선명하고 숫자가 높을수록 더 흐려진다. blur 값은 수평,수직 offset을 띄운 값과 blur 값으로 설정한 값이 더해진다.
• optional spread radius (생략 가능) : 그림자의 크기를 늘리고 줄이는 효과로 + 값은 크기를 늘리고 - 는 크기를 줄인다.
• color : 단위로는 hex,named,rgba 값을 사용할 수 있으며 생략시 텍스트 color로 그림자가 그려진다.

⭐️ 그림자의 투명도를 rgba(0, 0, 0, 0.4) 가 가장 일반적이다.

box shadow 참고사이트
https://neumorphism.io/#e0e0e0