CSS
CSS - box-shadow
주술회전목마
2022. 11. 25. 18:27
box-shadow
inset
: 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려짐
offset-x, offset-y
: 그림자의 위치를 설정offset-x : 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시offset-y : 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시
blur-radius
: 깂이 클수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아짐
spread-radius
: 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듬
color
: 색상 결정
Basic
box-shadow: 5px 3px black;
+ blur-radius
box-shadow: 3px 3px 5px black;
+ spread-radius
box-shadow: 0 0 5px 5px black;
multiple box shadows
box-shadow:
0 0 20px black,
20px 15px 30px yellow,
-20px 15px 30px lime,
-20px -15px 30px blue,
20px -15px 30px red;
inset
box-shadow: inset 2px 2px 5px black;
더 많은 예시 >