
[ CSS ] border에 그라데이션을 넣어보자
·
Style Sheet
프론트엔드 작업을 하다 보면 가끔 배경뿐만 아니라 테두리(border)에도 그라데이션을 적용해야 하는 경우가 발생한다. 배경에 그라데이션을 적용하는 것은 비교적 간단하지만, 테두리(border)에 그라데이션을 적용하는 것은 생각보다 까다롭다. 이번에는 테두리에 그라데이션을 추가하는 여러가지 방법을 알아보자. border-image 속성먼저 css의 border-image:linear-gradient() 속성을 통해 간단하게 그라데이션을 주는 방법을 알아보자..box { width: 200px; height: 200px; border: 5px solid; border-radius: 20px; border-image: linear-gradient(to right, blue, red); borde..