상세 컨텐츠

본문 제목

[HTML5&CSS3] 그림자 효과

Web/HTML5 & CSS3

by 클리엘 클리엘 2019. 11. 19. 17:12

본문

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와 동일합니다.

 

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 벤더 프리픽스(vendor prefix)  (0) 2019.12.05
[HTML5&CSS3] 선형 그레디언트(linear-gradient)  (0) 2019.11.25
[HTML5&CSS3] 그림자 효과  (0) 2019.11.19
[HTML5&CSS3] 위치  (0) 2019.11.13
[HTML5&CSS3] float  (0) 2019.11.08
[HTML5&CSS3] 폰트  (0) 2019.11.08

관련글 더보기

댓글 영역