카드 생성:

카드 생성 방법

第一步 - HTML 추가:

<div class="card">
  <img src="img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>빌 게이츠</b></h4>
    <p>건축가 & 공학자</p>
  </div>
</div>

第二步 - CSS 추가:

.card {
  /* 그림자를 추가하여 '카드' 효과를 만듭니다 */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
/* 마우스를 올렸을 때 더 깊은 그림자를 추가합니다 */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* 카드 컨테이너 내부에 여분의 내쪽 여백을 추가합니다 */
.container {
  padding: 2px 16px;
}

직접 테스트해 보세요

둥글고각:

예제

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px 둥글고각 */
}
/* 이미지의 왼쪽 상단과 오른쪽 상단에 둥글고각을 추가합니다 */
img {
  border-radius: 5px 5px 0 0;
}

직접 테스트해 보세요

관련 페이지

강의:CSS 그림자 효과