CSS3 border-image 테두리 이미지

라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다.

일단 필요한 것은 정사각형 이미지

이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다
html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp

h2{
width:200px;
border-width:30px;
-moz-border-image:url(../images/flower.jpg) 30 round; 
-webkit-border-image:url(../images/flower.jpg) 30 round; 
border-image:url(../images/flower.jpg) 30 round;
}

결과이미지 여기서 주목할부분은 보더(border)의 이미지라는 점이다 따라서 보더와 관련한 CSS 속성을 정해주지 않으면 나타나지 않는다. 보더는 레이아웃, 박스 크기에 영향주므로 보더를 사용아 적절한지 심각히 고려해보고 border-image를 사용해야 할 것이다.

위에서 border-width:15px; 로 정해준것은 이미지를 좀더작개 하기위함이였다. 이미지 크기가 90px, 따라서 3으로 나누면 각변,모서리는 30px로 나올 것이다 이걸 반으로 나누어 15px로 잡았으니 1/2크기로 이미지가 나타나는 것이다.결과물은 세세하다.

각 요소 들을 살펴보면 처음에는 이미지 주소, 두번째는 마진 패딩과 같은 오른쪽 시계방향으로 이미지 옵셋을 결정한다. 마찬가지로 한번에 정하면 네 변모두 동일시 되며 각기 지정할 수도 있다.

마지막 옵션은 다음 세가지다.
1)stretch : 기본값으로 이미지가 박스의 너비나 높이에 맞게 이미지 스케일을 조정한다.

2)repeat : 말그대로 반복시킨다. (가로 세로 길이 무시)

3)round : 반복하지만 엘리먼트 가로세로에 정확하게 맞게 정한다.

적용 할 이미지의 가로,세로 가운데 반복되는 부분은 작을 수록 좋다. repeat의 경우는 정확히 맞지 않기에 문제가 있고, round,repeat의 경우는 이미지 크기가 따라 이미지 비율이 깨지기 때문이다.(확대해서 이미지를 관찰해보자). 그리고 역시 IE에서는 아예 지원하지 않는다.

저작자표시