본문 바로가기
CSS/CSS 기초

[CSS] border-images 테두리 이미지로 그려넣기

by 알찬 퍼블리셔 2019. 5. 28.
728x90
반응형

이미지로 컨텐츠의 테두리를 그려넣는다.

 

  border-images-source:url(https://i.ibb.co/zFZx634/testImg.png);
    /* 이미지 소스 */
  border-images-slice:45;
    /* 이미지 슬라이스 (이미지를 잘라서 넣는다 최대 top/right/bottom/left 각각의 4개의 값을 넣을수 있음) */
  border-images-width:15px;
    /* 이미지 테두리 너비 */
  border-images-repeat:repeat;
    /* 이미지 테두리의 이미지 반복 
    stretch : 이미지를 늘려서 간격을 채운다
    repeat : 이미지를 반복해서 채운다 / 크기가 맞지않으면 이미지가 잘림
    round : 이미지를 반복해서 채운다 / 크기가 맞지않으면 이미지 크기가 조절됨
    space : 이미지를 반복해서 채운다 / 크기가 안맞으면 이미지 반복 사이에 공백 조절 
    
    
    */

 

 

 

728x90
반응형

댓글