[CSS] 그림자

---

1.text-shadow

{ text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }의 형식으로 작성된다.

 

1-1.horizontal offset(생략불가)

그림자를 오른쪽으로 지정값 이동

 

1-2.vertical offset(생략불가)

그림자를 아래로 지정값 이동

 

1-3.blur radius

그림자의 흐림 정도(커질수록 흐려지고 그림자가 커짐)

 

1-4.color

그림자 색지정

 

 

 

<style>
    .shadow{
        text-shadow: 2px 2px 4px red;
    }
</style>

<div class="shadow">그림자~</div>

그림자~

 

 

 

 

 

 

 

2.box-shodow

{ box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; } 형식으로 작성된다.

 

 

2-1.Inset

inset 임력시 그림자가 요소 안쪽위치

 

 

2-2.Horizontal-offset

그림자를 오른쪽으로 지정값만큼 이동

 

 

 

2-3.Vertical-offset

그림자를 아래로 지정값만큼 이동

 

 

 

2-4.Blur-Radius

그림자의 흐림도

 

 

 

2-5.Spread

그림자를 확대

 

 

 

2-6.Shadow-Color

그림자의 색

 

 

 

<style>
    .shadow{
        text-shadow: 2px 2px 3px red;
    }

    .shadow_box{
        height: 50px;
        width: 70px;
        background-color: aqua;
        box-shadow: 3px 3px 10px 4px violet;
    }
</style>
<div class="shadow_box">
    <div class="shadow">그림자~</div>
</div>

그림자~

 

 

 

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-shadow