YYYEJI

[XML] CSS에서 shadow 속성 본문

HTML(or XML) & CSS & JavaScript

[XML] CSS에서 shadow 속성

YEJI ⍢ 2022. 9. 30. 20:21
728x90

 

Shadow 속성이란 ?

 

그림자 효과를 보여줍니다.

 

 

shadow:        blur  color;

 

 

 

이 text와 block에 그림자를 넣어보겠습니다.

 

 

Text에 그림자 효과 넣기

 

text-shadow: 3px 3px 1px white;

text-shadow: 3px 3px 3px white;

3번째 속성을 변경하면 블러처리가 됩니다.

 

 

text-shadow: 10px 10px 1px white;

1, 2번째 속성은 x축과 y축의 위치를 변경합니다.

 

 

Block에 그림자 효과 넣기

 

box-shadow: 1px 1px 1px black;

 

 

box-shadow: 1px 1px 10px black;

blur 처리

 

 

box-shadow: 10px 10px 10px lightgray;

x, y 위치 이동

 

 

 

◡̈