border에 background-image 지정하기 / border에 애니메이션 부여하기

css-tricks 출처

css border를 많이들 사용하실텐데요.

dashed 형태라던지 dotted 라던지.. 등등

See the Pen Dashed Border Generator by Amit Sheen (@amit_sheen) on CodePen.

위의 Trick 예시를 보시면 조금 더 다양한 일들을 할 수 있음을 알 수 있으실겁니다.

이 트릭은 4개의 백그라운드를 사용하는 것입니다.

background 속성은 쉼표로 구분된 값을 사용하므로 4개의 배경(상단, 오른쪽, 하단 및 왼쪽에 하나씩)을 설정하고

테두리처럼 보이도록 크기를 조정하면 됩니다.

 

.box {
  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px);
  background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}

 

출처 : css-tricks.com/more-control-over-css-borders-with-background-image/?fbclid=IwAR0KHo91yFqnBs5ZSh4SucV4Ukl_WzdSGxHieBPFTawBegTDId7j_v6cxDAhttps%3A%2F%2Fcss-tricks.com%2Fmore-control-over-css-borders-with-background-image%2F%3Ffbclid