CSS 기초·15 / 26

둥근 모서리와 그림자

border-radius는 모서리를 둥글게, box-shadow는 그림자를 만듭니다. 요즘 웹의 '카드' 모양은 대부분 이 둘로 만듭니다.

<style>
  .card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
</style>

box-shadow의 값은 순서대로 가로 거리, 세로 거리, 번짐, 색입니다.

할 일

모서리를 12px 둥글게 만드세요

막혔나요?
코드 에디터
미리보기