[HTML5&CSS3] 그림자 효과

1. text-shadow

 

글자에 그림자 효과를 부여합니다.

<style type="text/css">
    span {
        text-shadow: 5px 5px 5px black;
    }
</style>

속성의 값을 부여하는 순서는 '오른쪽 부분, 아랫부분, 그림자 진한 정도, 색'이며 그림자를 여러 개 부여하고 싶다면 해당 순서에 맞춰 표현하고자 하는 그림자 개수만큼 속성을 부여합니다.

<style type="text/css">
    span {
        box-shadow: 5px 5px 5px black, 5px 5px 5px red;
    }
</style>

---

2. box-shadow

 

박스에 그림자 효과를 부여합니다.

<style type="text/css">
    div {
        box-shadow: 5px 5px 5px red;
    }
</style>

속성에 값을 부여하는 순서는 text-shadow와 동일합니다.