그림자를 겹쳐 깊이 표현

한 겹은 단순한 높이 표현에 유용합니다. 여러 층으로 가까운 어두운 가장자리와 넓고 부드러운 그림자를 합칠 수 있습니다. CSS는 먼저 나열한 그림자를 위에 그리므로 선명한 층을 보여주려면 먼저 배치하세요.

위치, 흐림과 확장

가로와 세로 위치는 그림자를 상자에서 이동시키고 흐림은 가장자리를 부드럽게 합니다. 양수 확장은 흐림 전에 넓히고 음수는 줄입니다. 실용적인 픽셀 범위로 미리보기 응답성과 선언의 사용 편의를 유지합니다.

inset을 켜면 상자 안에 그림자를 그려 눌린 조작부나 움푹한 패널에 쓸 수 있습니다. 불투명도는 복사한CSS의rgba() 알파 값으로 바뀝니다. 미리보기와CSS는 브라우저에서 로컬로 생성합니다.

자주 묻는 질문

몇 층까지 추가하나요?

최대8층입니다. 적은 층이 보통 조절과 스타일시트 유지 관리에 편합니다.

음수 확장은 무엇인가요?

흐림 전에 그림자 형태를 줄여 큰 흐림이 상자 가장자리 가까이에서 시작하게 합니다.

일반 스타일시트에서 쓸 수 있나요?

네. 픽셀 길이와rgba() 색상을 쓰는 표준box-shadow 선언을 만듭니다.

모든 웹사이트와 정확히 같나요?

브라우저CSS 렌더러를 쓰지만 주변 배경, 모서리 반경, 요소 크기와 다른 스타일이 최종 결과에 영향을 줍니다.