<div> 태그 등으로 만든 박스에 그림자 효과를 주는 방법을 알아보겠습니다.
box-shadow:
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
box-shadow: 속성으로 박스에 그림자 효과를 줄 수 있습니다.
안에 들어가는 속성 값은 box-shadow: a b c d e 다섯가지로,
a는 그림자가 오른쪽으로 얼마나 이동할 것인가,
b는 그림자가 아래쪽으로 얼만큼 이동할 것인가,
c는 그림자의 부드러운 정도,
d는 그림자의 확장량, e는 그림자의 색상입니다.
shadow
위의 소스 코드로 이렇게 박스에 그림자가 생기면서 입체감이 생기게 되었습니다.
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스의 안쪽에 그림자 넣기 (0) | 2021.02.19 |
|---|---|
| CSS 박스의 모서리를 둥글게 라운딩 처리하는 방법 (0) | 2021.02.14 |
| CSS 박스의 배경에 그라데이션 넣기 (0) | 2021.02.12 |
| CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 (0) | 2021.02.10 |
| CSS 리스트 태그의 번호 디자인 변경 (0) | 2021.02.08 |
댓글