CSS box-shadow 생성

사용 방법

1. 그림자 하나면 슬라이더로, 여러 개면 한 줄에 하나씩 적습니다.
2. 한 줄은 “x y 번짐 확산 색”입니다. 숫자를 빼면 0이 됩니다.
3. 글자 그림자라면 text-shadow로 바꿉니다.
4. 선언을 복사합니다.

자주 묻는 질문

그림자를 여러 개 겹치는 이유는?

하나만으로는 거의 그럴듯해 보이지 않기 때문입니다. 실제 그림자는 가장자리 가까이의 진한 부분과 넓고 옅은 부분이 합쳐진 것입니다. 번짐과 투명도가 다른 그림자를 두세 겹 쌓아야 카드가 테두리를 두른 게 아니라 떠 있는 것처럼 보입니다. 한 줄에 하나씩 적으면 하나의 선언으로 묶입니다.

확산(spread)은 무엇인가요?

번지기 전에 그림자를 키우거나 줄입니다. 음수로 하면 안쪽으로 당겨져서, 옆으로 새지 않고 아래로만 깔리는 그림자를 만들 수 있습니다.

text-shadow에서 확산이 안 먹습니다.

text-shadow에는 확산이 없기 때문입니다. x, y, 번짐, 색 네 가지뿐입니다. 네 번째 숫자를 적었을 때는 브라우저처럼 조용히 버리지 않고 그렇다고 알려 줍니다.

inset은 무엇인가요?

그림자를 상자 안쪽에 그립니다. 눌린 것처럼 보이게 할 때 씁니다. box-shadow에만 있습니다.

서버로 전송되나요?

아니요. 브라우저 안에서만 동작하므로 입력한 내용은 컴퓨터를 벗어나지 않습니다.