목차
- borderImage 예제 - 테두리 이미지 설정
- borderImage 정의
- borderImage 구문
borderImage 예제 - 테두리 이미지 설정
<style>
#hz {
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
-webkit-border-image: url(https://homzzang.com/img/css/border.png) 30 30 stretch; /* Safari 5 */
-o-border-image: url(https://homzzang.com/img/css/border.png) 30 30 stretch; /* Opera 12 */
border-image: url(https://homzzang.com/img/css/border.png) 30 30 stretch;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<h1>홈짱닷컴 Homzzang.com</h1>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.WebkitBorderImage = "url(https://homzzang.com/img/css/border.png) 30 30 round"; /* Safari 5 */
document.getElementById("hz").style.OBorderImage = "url(https://homzzang.com/img/css/border.png) 30 30 round"; /* Opera 12 */
document.getElementById("hz").style.borderImage = "url(https://homzzang.com/img/css/border.png) 30 30 round";
}
</script>
결과보기
borderImage 정의
테두리 이미지 단축속성. (아래 속성들을 한번에 정의 가능.)
1.
생략된 값은 해당 속성의 기본값으로 설정.
2.
- 기본값: none 100% 1 0 stretch
- 반환값: 요소의 CSS border-image 속성값 표시 문자열
- CSS버전: CSS3
3.
IE11 이상 주요 최신브라우저 지원.
borderImage 구문
[반환]
object.style.borderImage
[설정]
object.style.borderImage = "source slice width outset repeat|initial|inherit"
[속성값]
borderImageSource
테두리 이미지 경로
borderImageSlice
테두리 이미지 안쪽 오프셋
borderImageWidth
테두리 이미지 너비
borderImageOutset
테두리 이미지 영역이 테두리 상자 넘는 확장 양
borderImageRepeat
테두리 이미지를 반복/둥글게/늘리기 등 지정
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.