border-image

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border-image 이미지를 이용해서 테두리를 만들어 줍니다.

예제 1
border-image 개요 (사진 액자효과 만들어 보기)
보기
설명
- 일단 이렇습니다. 뭐가 뭔지 이해가 잘 안되실 겁니다. 당연합니다 ^^;
- 아래 예제를 봐주세요~!
예제 2
실습 - 크기조절해서 어떻게 변하는지 확인해 보기 (테두리 이미지를 봐주세요)
보기
width :
400px
width : 400px
height :
300px
height : 300px
설명

아래 이미지를 사용하여 테두리에 효과를 주었습니다.



이제 border-image가 무엇인지 느낌이 오실겁니다 !!

다음 예제를 봐주세요!

예제 3
보기
소스
<style type="text/css">
    .css_test {
        border : 19px solid transparent;/* 순서주의 : 이 부분은 border-image 보다 먼저 나와야 합니다 */
        -o-border-image : url('http://superkts.com/img/css/border1.png') 19 19 repeat;/* 오페라 브라우저 전용 */
        background : #fff;
        border-image : url('http://superkts.com/img/css/border1.png') 19 19 repeat;
        display : inline-block;
        margin : 0 auto;
        margin : 3px;
        padding : 3px;
    }
</style>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/232E7438555ABF4020" />
</div>
사용된 CSS (클릭시 보기) : -o-border-imagebackgroundborderborder-imagedisplaymarginpadding
설명
현재 등록중 입니다 ^^*
 
+ 관련 CSS +
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소