CSS Box Shadow
- 이전 페이지 CSS 그림자
- 다음 페이지 CSS 텍스트 효과
CSS box-shadow 속성
CSS box-shadow 속성이 요소에 그림자를 적용합니다。
가장 간단한 사용법은 수직 및 수평 그림자를 지정하는 것입니다：
검은색 box-shadow가 있는 노란색 <div> 요소
예제
div {
box-shadow: 10px 10px;
}
다음으로, 그림자에 색상을 추가합니다：
그림자가 있는 노란색 <div> 요소
예제
div {
box-shadow: 10px 10px silver;
}
다음으로, 그림자에 흐릿한 효과를 추가합니다：
노란색 <div> 요소, 흐릿한 box-shadow로
예제
div {
box-shadow: 10px 10px 5px silver;
}
카드
또한 사용할 수 있습니다 box-shadow 속성이 인쇄 카드 효과를 생성합니다：
1
2021년 1월 1일
커피
예제
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
CSS 그림자 속성
다음 표는 CSS의 그림자 속성을 나열합니다：
| 속성 | 설명 |
|---|---|
| box-shadow | 요소에 하나나 여러 개의 그림자를 추가합니다. |
| text-shadow | 텍스트에 하나나 여러 개의 그림자를 추가합니다. |
- 이전 페이지 CSS 그림자
- 다음 페이지 CSS 텍스트 효과
