border-image-outset

정의 및 사용

border-image-outset 은 지정해 주는 거리만큼 테두리 이미지가 바깥으로 즉, margin 영역 쪽으로 빠져나가게 되는 속성이다.

정의 및 사용
기본값 0
상속 no
버전 CSS3
자바스크립트 구문 object.style.borderImageOutset=”0 5″

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원 안함Opera 지원 안함Safari 지원 안함

현재 이 속성은 크롬 브라우저에서만 지원한다. [2012.05]

구문

속성 값 설명
설명
length px, em 으로 직접 거리를 지정
number 해당 이미지의 width 값을 기준으로 적힌 숫자만큼 곱하기 한 거리만큼 지정

예제

각 숫자가 의미하는 위치

border-image-outset 역시 padding, margin 의 top, right, bottom, left 의 시계방향 순대로 4개의 위치를 지정할 수 있으며, 생략시 참조되는 값도 같은 원리이다.

  • 첫번째 숫자는 top-left, top-right 의 vertical 값 (예제:상단의 좌우 이미지의 영역으로 부터 세로 거리를 이미지의 너비의 두배만큼 떨어트려라)
  • 두번째 숫자는 top-right, bottom-right 의 horizontal 값
  • 세번째 숫자는 bottom-right, bottom-left 의 vertical 값
  • 네번째 숫자는 bottom-left, top-left 의 horizontal 값

  • 위 예제는 border-image-ouset : 2 4 6 4 ; 와 같은 뜻이다.

목록 으로

댓글