CSS - 테두리 효과 : 그림자나 모서리를 부드럽게

테두리에 그림자나 모서리에 효과를 줄 수 있습니다.

속 성	설 명
border-radius	테두리를 둥글게 표시하기 <크기> | 백분율 중 하나로 지정 border-top-left-radius: 상단 왼쪽 모서리를 지정. border-top-right-radius: 상단 오른쪽 모서리를 지정. border-bottom-left-radius: 하단 왼쪽 모서리를 지정. border-bottom-right-radius: 하단 오른쪽 모서리를 지정. border-radius: 네 모서리를 한번에 지정. 다음 중 하나의 방법을 사용. <top-left><top-right><bottom-right><bottom-left> <top-left><top-right, bottom-left><top-right> <top-left, bottom-right> <top, left, right, left> 모두 지정 Ex.1) border-radius: 25px 15px 10px 20px Ex.2) border-radius: 15px 20px Ex.3) border-radius: 30px 0px
box-shadow	테두리에 그림자 효과 지정 none: 그림자 효과 없음 h-offset: 수평방향 그림자. 필수항목 양수이면 오른쪽으로, 음수이면 왼쪽에 그림자를 둠. v-offset: 수직방향 그림자. 필수항목. 양수이면 아래쪽에, 음수이면 위쪽에 그림자를 둠. blur: 그림자 흐림 정도. 기본 값 0. 숫자가 커질수록 흐려짐. 음수는 사용불가. spread: 그림자의 크기. 양수는 그림자를 크게, 음수는 그림자가 작게 설정. color: 그림자 색상. Ex.1) box-shadow: 5px 10px 20px red; /* 수평 5px, 수직 10px, 20px 흐림 */ Ex.2) box-shadow: 5px 10px 30px 8px red; /* 수평 5px, 수직 10px, 30px 흐림, 8px 크기 */

border-radius 속성

모서리는 <top-left>, <bottom-right>, <top-right>, <bottom-left> 에서 하나 이상을 설정할 수 있습니다.

상단 왼쪽과 하단 오른쪽 모서리를 30px 로 둥글게 합니다.

<style>
div {
  border: 10px solid red;
  border-radius: 30px 0px;
}
</style>

<div>하보니 PHP</div>

하보니 PHP

box-shadow 속성

<style>
.hh1 {
  border: 1px solid;
  padding: 10px;

  /*
  8px 만큼 그림자를 흐리게 하고,
  색상은 노란색으로 ...
  */
  box-shadow: 5px 10px 8px yellow;
}
.hh2 {
  border: 1px solid;
  padding: 10px;

  /*
  30px 만큼 그림자를 흐리게 하고,
  크기가 10px 인 그림자를 만듭니다.
  색상은 빨간색으로 ...
  */
  box-shadow: 5px 10px 30px 10px red;
}
</style>

<div class="hh1"> 하보니 PHP </div>

<div class="hh2"> 하보니 PHP </div>

하보니 PHP

하보니 PHP