[퍼블] html 박스를 디자인 하기 위한 CSS-3(그림자)

html에서 그림자 효과를 주기 위해서는 크게 2가지가 있다

• 박스에 그림자 효과 주기 ->  box-shadow
• 텍스트에 그림자 효과 주기 -> text-shadow

shadow 효과를 주기 위해서는 value 값을 3개를 줘야 하는데, x, y, 퍼짐 색상 순으로 주면 된다

 

ex)

    <div class="test"></div>
    <h1 class="text">test</h1>

 

 

.test{
    border: 5px solid red;
    width: 100px;
    height: 100px;
    box-shadow: 5px 5px 20px black;
}

.text{
    font-size:100px;
    text-shadow: 5px 5px 20px black;
}

해당 html 결과를 보면 저런 식으로 노출이 됩니다. 하지만 box-shadow에 inset조건을 준다면 그림자 효과가 안으로 가게 됩니다.

.test{
    border: 5px solid red;
    width: 100px;
    height: 100px;
    box-shadow: inset 5px 5px 20px black;
}

하지만 text-shadow에는 inset 조건을 사용할 수는 없습니다.