• 회원가입
  • 로그인
  • 구글아이디로 로그인

[border] CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)


border-image-slice 예제

 

<style>

#hz_1 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 50;

}


#hz_2 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 20%;

}


#hz_3 {

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://www.w3.org/TR/css3-background/border.png) round;

    border-image-slice: 30%;

}

</style>


<p id="hz_1">홈짱닷컴 (Homzzang.com) border-image-slice: 50;</p>

<p id="hz_2">홈짱닷컴 (Homzzang.com) border-image-slice: 20%;</p>

<p id="hz_3">홈짱닷컴 (Homzzang.com) border-image-slice: 30%;</p>

결과보기

 

 

border-image-slice 정의

 

border-image-source에 지정된 테두리 이미지를 어떻게 9등분 할지 지정

 



1.

기본적으로, 이미지를 9등분해서, 4개의 모퉁이, 4개의 변, 그리고 한가운데로 자름.

2.

4개의 모퉁이는 각각 테두리의 모퉁이로 보내고, 4개의 변은 테두리의 변으로 사용.

3.

일반적으로, 한가운데는 transparent (투명) 처리되어 보이지 않게 되지만,
속성값에 fill 키워드가 들어간 경우엔 사용됨.

 

4.

기본값: 100%
상속여부 : 상속 X
애니효과 : 가능 X
CSS버전 : CSS3
JS 구문 : object.style.borderImageSlice="30%"

5.

IE11 이상 주요 최신브라우저 지원


 

 

border-image-slice 구문


selector {border-image-slice: 속성값;}

 


 

숫자

px단위의 숫자. (주의: 적을 땐 따로 px  단위 입력 불필요)


% (백분율)
상대비율

 

fill

이미지의 한가운데를 보이게 할지 여부.

(예) border-image-slice:30% fill;

 

initial

속성값을 기본값으로 지정.

 

inherit

부모 요소의 속성값 상속.

 


 

속성값 개수별 의미

border-image-slice: 10;

(상단가로줄, 우측세로줄, 하단가로줄, 좌측세로줄) 모두 너비가 10px로 동일.

 

border-image-slice: 10 20;

(상단가로줄 하단가로줄) 10px  ,  (우측세로줄 좌측세로줄)  20px

 

border-image-slice: 10 20 30;

상단가로줄 10px , (우측세로줄, 좌측세로줄) 20px , 하단가로줄: 30px

 

border-image-slice: 10 20 30 40;

상단가로줄 10px, 우측세로줄 20px, 하단가로줄 30px, 좌측세로줄 40px

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012