[HTML/CSS] div 박스에 그림자 만들기(box-shadow)

 

 

<div> 박스에 그림자를 그리기 위해서는

CSS의 box-shadow 속성을 사용합니다.

 

 

box-shadow

이 속성은 CSS 요소에 그림자를 추가해줍니다.

box-shadow : 5px 5px 5px 5px red inset;

  허용 값  

• offset-x, offset-y
  • 그림자의 위치를 지정합니다.
  • offset-x : 양수를 입력하면 그림자가 오른쪽으로, 음수를 입력하면 그림자가 왼쪽으로 만들어집니다.
  • offset-y : 양수를 입력하면 그림자가 아래쪽으로, 음수를 입력하면 그립자가 위쪽으로 만들어집니다.
• blur-radius
  • 숫자가 커질수록, 그림자가 블러 처리되어 흐려집니다.
• spread-radius
  • 숫자가 커질수록, 그림자의 크기가 커집니다.
• color
  • 그림자의 색깔을 지정할 수 있습니다.
• inset
  • inset이라는 이 키워드를 사용하면, 그림자가 요소의 바깥쪽이 아닌 안쪽에 생성됩니다.

 

 

div에 그림자 만들기 예제

<div class='ex01'>ex01</div>
<div class='ex02'>ex02</div>
<div class='ex03'>ex03</div>
<div class='ex04'>ex04</div>

.ex01 {
  box-shadow: 5px 5px gray;
}

.ex02 {
  box-shadow: 5px 5px 5px gray;
}

.ex03 {
  box-shadow: 5px 5px 5px 5px gray;
}

.ex04 {
  box-shadow: inset 5px 5px gray;
}

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
  margin: 20px;
  text-align : center;
  line-height : 100px;
}

box-shadow: 5px 5px gray;

오른쪽으로 5px, 아래쪽으로 5px 위치에 회색의 그림자가 생겼습니다.

 

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

이전 예제(ex01)에 5px의 블러를 추가하였습니다.

 

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

이전 예제(ex02)에 5px만큼 크기를 늘렸습니다.

 

box-shadow: inset 5px 5px gray;

ex01 예제와 똑같이 그림자를 생성하고, inset 키워드를 추가하여 그림자의 방향을 안쪽으로 바꾸었습니다.

 

 

 

그림자 여러개 생성하기

<div class='ex'>ex</div>

.ex {
  box-shadow: 5px 5px gray, 10px 10px 10px yellow;
}

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
  margin: 20px;
  text-align : center;
  line-height : 100px;
}

box-shadow: 5px 5px gray, 10px 10px 10px yellow;

한꺼번에 여러개의 그림자를 생성할 수 있습니다.

각 그림자는 콤마(,)로 구분합니다.

위 예제에서는 5px의 회색 그림자, 10px의 블러 처리된 노란색 그림자가 같이 생성되었습니다.