border에 그라데이션 주기

border 그라데이션

• 테두리에 직접적으로 그라데이션을 주는 방식 보다 배경 두 개를 겹친 다음 그 뒤에 있는 배경에 색깔을 그라데이션 주고, 앞에 있는 배경보다 살짝 더 큰 크기를 준다.

• 앞에 있는 배경은 하얀색 배경을 주면 살짝 겹치지 않은 부분이 테두리 역할을 하게 된다

<div class="big">
  <div class="small">
  	배경
  </div>
</div>

.big{
border-radius: 10px;
width:300px;
height:300px;
padding:4px;
background: linear-gradient(90deg,#eb0f0f,#d34c42,#e2ce77);
}

.small{
   width:100%;
   height:100%;
   text-align:center;
   line-height:300px;
  	background: white;
  	border-radius: 8px;
  	overflow:hidden;
 }

• 애니메이션 주는 코드들은 밑에 링크에서 다양하게 볼 수 있다.
  https://freefrontend.com/css-border-animations/