본문 바로가기
css

CSS box-shadow 속성 사용방법 정리

by uensung 2022. 12. 28.

안녕하세요! 오늘은 요소의 테두리에 그림자 스타일을 설정하는 box-shadow 속성에 대해

알아 보려고 합니다.

자주 사용하는 속성인데 내부 속성 인자 값이 많고 정확한 의미를 모르고 사용하는 경우가 많아서

정리해보려고 합니다!

 

 

 

속성 내부 설정 값

 

<offset-x> <offset-y>

그림자의 위치를 설정하는 첫번째, 두번째 길이설정 값입니다.

offset-x 값이 양수일 경우 오른쪽으로 그림자나 나타나고 음수일 경우 왼쪽으로 그림자가 표시됩니다.

offset-y 값이 양수일 경우 아래쪽으로 그림자나 나타나고 음수일 경우 위쪽으로 그림자가 표시됩니다.

 

<blur-radius>

그림자 테두리의 흐린 정도를 나타내는 세번째 길이설정 값입니다.

이 값이 클 수록 그림자 크기는 더 커지고 색은 더 밝아 집니다. 음수 값은 사용할 수 없고,

기본값은 0으로 설정하지 않을 경우 선명한 테두리가 나타납니다.

 

<spread-radius>

그림자의 퍼지는 범위를 나타내는 네번째 길이설정 값입니다.

양수일 경우 그림자가 더 넓게 확산되고, 음수일 경우 그림자가 줄어듭니다. 기본값은 0입니다.

 

<color>

그림자의 색상을 선택하는 속성입니다.

 

<inset>

값을 지정하지 않으면 그림자를 적용할 요소가 떠있고, 뒤에 그림자가 나타나는 효과가 나타납니다.

값을 지정할 경우 그림자가 요소의 내부에 그려집니다. 움푹 들어간 것 처럼 보이는 효과를 보입니다.

지정하지 않는 상태가 기본 값 입니다.

 

 

 

사용 예시

 

박스 하나를 화면 가운데 생성하고 직접 box-shadow 속성을 변경하여 효과를 줘보겠습니다.

우선 box 하나를 생성해 줍니다.

 

<style>
  .box {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    border: 2px solid black;
  }
</style>

<body>
  <div class="box">
  </div>
</body>

 

 

 

 

 

<offset-x> <offset-y>

 

양수값 설정

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

 

 

 

 

 

음수값 설정

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

 

 

 

 

 

<blur-radius>

.box {
  box-shadow : 5px 5px 10px;
}

 

 

 

 

 

<spread-radius>

 

양수값 설정

 

.box {
  box-shadow : 5px 5px 10px 3px;
}

 

 

 

 

음수값 설정

 

.box {
  box-shadow : 5px 5px 10px -3px;
}

 

 

 

 

 

<color>

 

.box {
  box-shadow : 5px 5px 10px 3px red;
}

 

 

 

 

 

<inset>

 

.box {
  box-shadow : 5px 5px 10px -3px inset;
}

 

 

 

 

 

오늘은 box-shadow 속성의 값이 무엇을 의미하는지를 알아보고 관련 예시를 함께 확인해 봤습니다.

다음에 또다른 내용으로 찾아 오겠습니다.

그럼 이만~

 

'css' 카테고리의 다른 글

CSS calc() 활용방법 정리  (0) 2023.01.10
CSS 세로 가운데 정렬 방법 정리  (0) 2022.12.29
CSS margin 속성 사용법 정리  (0) 2022.12.27
CSS box-sizing 속성 (영역, 기준 정리)  (0) 2022.12.21
CSS 초기화 (Reset CSS)  (0) 2022.12.14

댓글