코드랩 레퍼런스

border-image-slice 본문

CSS

border-image-slice

webstoryboy 2016. 6. 14. 01:01
border-image-slice는 테두리 이미지 크기 속성을 설정합니다.
특징 설명
기본 값 100%
상속 안됨
애니메이션 안됨
버전 CSS3

Definition

  • border-image-slice는 테두리 이미지 크기 속성을 설정합니다.

Syntax

border-image-slice : number | percentage | fill | inherit ;
/* 표현 방법(위,오른쪽,아래,왼쪽:10)을 설정한 경우 */
border-image-slice : 10;

/* 표현 방법(위,아래:10 | 왼쪽,오른쪽:20) */
border-image-slice : 10 20;

/* 표현 방법(위:10 | 왼쪽,오른쪽:20% | 아래:30) */
border-image-slice : 10 20% 30;

/* 표현 방법(위:10 | 오른쪽:20 | 아래:30 | 왼쪽:40%) */
border-image-slice : 10 20 30 40%;

Property

속성 값 설명
number 테두리 이미지 크기를 숫자로 설정합니다.
percentage 테두리 이미지 크기를 %로 설정합니다.
number 테두리 이미지 크기에 맞게 설정합니다.
inherit 테두리 이미지 크기를 부모 요소로부터 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
border-image-slice

Sample

border-image-source











Ad

Comments