[css] box-shadow(그림자)

요소에 그림자를 주기위해서는 box-shadow를 사용하면 된다. 기본값은 none이다.

 

/* css */
.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: none;
}

<!-- html -->
<div class="div1">
	Hello World!
</div>

Hello World!

 

 

위치설정

가로 위치와 세로 위치를 설정해 줄 수 있다.

/* css */
.div2 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px;
}

<!-- html -->
<div class="div2">
	Hello World!
</div>

Hello World!

 

 

색 설정

그림자색의 기본값은 검정색이고, 색을 따로 box-shadow에 설정해 줄 수 있다.

/* css */
.div3 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px #4d9fff;
}

<!-- html -->
<div class="div3">
	Hello World!
</div>

Hello World!

 

 

흐림정도

그림자의 흐림 정도를 나타낼 수 있다. px값이 커질수록 흐려진다.

/* css */
.div4 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px 10px #4d9fff;
}

<!-- html -->
<div class="div4">
	Hello World!
</div>

Hello World!

 

 

퍼짐정도

그림자의 퍼짐 정도를 나타낼 수 있다. 흐림정도의 뒤에 써주면 되며, px값이 높아질수록 퍼진다.

/* css */
.div5 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px 10px 20px #4d9fff;
}

<!-- html -->
<div class="div5">
	Hello World!
</div>

Hello World!

 

 

적는 순서 정리

box-shadow: 40px 10px 10px 20px #4d9fff;

box-shadow: 가로크기 세로크기 흐림정도 퍼짐정도 색상;