CSS 그림자 넣기

1 개념

CSS3 shadow effect

CSS3 그림자 효과

• 문자와 박스의 그림자 효과

2 문자 그림자

CSS text-shadow 속성 문서를 참고하십시오.

• "text-shadow" 속성에 수평 그림자, 수직 그림자, 블러 효과, 그림자 색상 속성을 각각 반영함

<style>
h1 { text-shadow: 2px 2px 3px green; }
</style>

<h1>My name is bart.</h1>

• 여러 그림자 동시 적용

<style>
h1 { text-shadow: 2px 2px 3px green, 2px 2px 3px red; }
</style>

<h1>My name is bart.</h1>

3 박스 그림자

CSS box-shadow 속성 문서를 참고하십시오.

• 문자 그림자와 동일한 값을 box-shadow 속성에 반영하면 됨

<style>
div {
	width: 100px; height: 100px;
	background-color: lightgray;
	box-shadow: 2px 2px 2px grey;
}
</style>

<div>shadow effect</div>

4 같이 보기

• CSS text-shadow 속성
• CSS box-shadow 속성