[CSS] shadow 그림자 설정

box-shadow 

* text-shadow도 동일

box-shadow : 수평 수직 번짐정도 그림자크기 색상 방향 순 입력
 (번짐정도,그림자크기,색상,방향 생략가능)

- 방향 : insert = 안쪽 그림자 설정

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

 

 

생성 예시

<style>
        div{
            width: 200px;
            margin-top: 20px;
            border: 1px solid black;
        }
        p{
            font-size: 30px;
            font-weight: 700;
        }
        .shadow1{
            text-shadow: 5px 0px 0px red;
        }
        .shadow2{
            text-shadow: 0px 5px 0px red ;
        }
        .shadow3{
            text-shadow: 5px 5px 5px red, 0px 5px 5px yellow ;
        }
        .box1{
            box-shadow: 5px 0px 0px 0px red;
        }
        .box2{
            box-shadow: 0px 5px 0px 0px red;
        }
        .box3{
            box-shadow: 5px 5px 0px 0px red;
        }
        .box4{
            box-shadow: 5px 5px 5px 0px red;
        }
        .box5{
            box-shadow: 5px 5px 5px 5px red inset;
        }
        img{
            width: 200px;
            height: 200px;
            box-shadow: 5px yellow;
        }
    </style>