[css] box-shadow 박스에 그림자 효과 주기

CSS / BOX-SHADOW

 

값을 넣을 때 

• 첫 번째 값 : 가로 위치 (필수)
• 두 번째 값 : 세로 위치 (필수)
• 세 번째 값 : 그림자의 번짐 (blur)
• 네 번째 값 : 그림자의 크기 (spread)
• 다섯 번째 값 : 그림자의 색상 
• 여섯 번째 값 : inset -> 설정하면 그림자가 컨텐츠 내부에 생긴다.
• 위의 설정값은 첫번째, 두번째만 필수다.

---

예제

<p id="box1">box1</p>

#box1 {
  margin: 50px;
  width: 100px;
  height: 50px;
  border-radius: 20px;
  background-color: yellow;
  text-align: center;
  box-shadow:
    20px 20px 10px blue;
}