CSS - border에 그라디언트(그라데이션) 넣기

See the Pen border-gradient by nilgi (@nilgi) on CodePen.

 

 

border: 10px solid;
border-image: linear-gradient(to right, #FF9702, #ccc) 1;

  // 뒤에 1은 border-image-slice 값이며 그리디언트 적용을 위해 필수.

 

그라디언트를 적용하면 border-radius를 쓸 수 없다. border-radius 쓰려면 background와 padding으로 테두리 효과를 내는 게 편하다.

 

CSS - background, padding으로 border(그라디언트) 효과 내기

CSS - background, padding으로 border(그라디언트) 효과 내기

 

- - -

 

▶ border-image
    • border-image-source // 사용할 이미지 경로
        ↪ border-image: url(***.png);
    • border-image-slice // 이미지 나누는 방법
        ↪ border-image-slice: 숫자 / % / fill

            ↪ n : 상하좌우 동일
            ↪ n n : 상하, 좌우

            ↪ n n n : 상, 좌우,  하

            ↪ n n n n : 상, 우, 하, 좌
            ↪ fill : 이미지 중앙부분으로 채우기

              ※ 이미지는 꼭지점 4부분, 모서리 4부분, 중앙 부분으로 총 9부분으로 나눈다.

                  지정한 거리값 만큼 이미지 영역 분할선이 크기와 위치를 결정한다.
    • border-image-width // 이미지 너비
    • border-image-outset // 이미지를 box 외부 어디에 위치할지 설정
    • border-image-repeat // 이미지 반복
        ↪ strech : 크기에 맞게 이미지 늘리기
        ↪ repeat : 크기에 맞게 이미지 반복
        ↪ round : 크기게 맞게 반복하고 크기가 맞지 않으면 이미지를 줄이거나 늘린다.
        ↪ space : 크기게 맞게 반복하고 모자라면 반복 이미지 사이에 공백으로 채우기.

        ↪ border-image-repeat: 첫 번째 값 두 번째 값 // 첫 번째 : 상하 / 두 번째 값: 좌우

▶ border-image: source slice width outset repeat // 속기 순서