개념
- CSS3 shadow effect
- CSS3 그림자 효과
- 문자와 박스의 그림자 효과
문자 그림자
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>
박스 그림자
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>