[IT] CSS - box-shadow 그림자 넣기 (border 테두리 활용, 예제)

 

 ㅇ box-shadow 란 무엇인가 ?

CSS속성 은 요소의 프레임 주위에 그림자 효과를 추가합니다.

 

ㅇ 기본구조

box-shadow:   x축  y축  흐림정도  그림자굵기  색상 ;

ㅡ x 축으로의 이동이다 .

ㅡ 음수도 가능하다.

ㅡ 요소의 속성은 3개만 써도 되고 4개만 써도 된다.

 

css 예제1 ㅡ 속성 3개 넣기

border-shadow

      div {

        position: absolute;

        top: 100px;

        left: 400px;

        width: 100px;

        height: 100px;

        border: 1px solid red;

        box-shadow: 2px 10px 5px gray;

      }

 

 

css 예제2 ㅡ 위의 코드에서 테두리 굵기 추가

border-shadow

box-shadow: 2px 10px 5px 5px gray;

 

 

 

css 예제3 ㅡ inset 추가

border-shadow inset

      div {

        position: absolute;

        top: 100px;

        left: 400px;

        width: 100px;

        height: 100px;

        border: 1px solid red;

        box-shadow: 2px 10px 5px gray inset;

      }

 

css 예제4 ㅡ 테두리처럼 효과주기

border-shadow inset

  box-shadow: 0px 0px 0px 10px gray inset;