[2021/12/27]국비지원 CSS3 8-(4) border-image

border-image : 색 대신에 이미지파일을 이용해서 border를 출력하는 property
- ( 통합 ) border-image : url( 이미지 경로 ) x축-sprite값 y축-sprite값 repeat repeat-style
- border-image-source : url( 이미지 경로 )
- border-image-slice : 3x3 size
- border-image-repeat
  - stretch : 늘리기
  - repeat : 반복
  - round : 이미지의 마지막을 작게 출력해서 잘리지 않도록
  - space : 이미지 잘려도 상관없을 때

브라우저에 따라서는 css3 property를 완벽 구현하지 못 하는 경우가 있어서 식별 접두사가 필요한 property가 다수
식별 접두사
- -webkit- : Safari, Chrome ( + 11 Edge )
- -o- : Opera
- -moz- : 게코 모질라 불여우
- -ms- : Explorer ( 故익플 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-image</title>
    <style type="text/css">
        h1{border-width:10px;border-style:solid;border-image:url(images/border.png) 28 28 stretch round;}
        /* border-image-source:url()
            border-image-slice:3x3사이즈
            border-image-repeat:stretch=늘림/repeat=반복/round=이미지 마지막을 작게 해서 안 잘리게/
            space=마지막 잘릴 수 있음 */
        div{height:100px;border-width:10px;border-style:solid;border-image:url(images/border2.png) 22 22 round stretch;}
        /* http://border-image.com */
        p{height:100px;border-style: solid;border-width: 30px 5px 30px 5px;
            -moz-border-image: url(images/border3.png) 28 16 27 16 round round;
            -webkit-border-image: url(border3.png) 28 16 27 16 round round;
            -o-border-image: url(border3.png) 28 16 27 16 round round;
            border-image: url(images/border3.png) 28 16 27 16 round round;}
        /* 브라우저에 따라서는 css 속성 property를 부분구현 가능한 경우가 있어서
        css 속성 앞에 브라우저 식별 접두사 vender prefix를 지정해서 사용
        
        -moz- 게코 모질라 불여우
        -webkit- 웹킷(사파리/크롬)
        -o- 오페라(크로미움기반)
        -ms- ms익스플로어*/
    </style>
</head>
<body>
    <h1>이미지를 사용해 테두리 만들기</h1>
    <div>border-image</div>
    <p>border-image</p>
</body>
</html>

결과물

저작자표시 비영리 변경금지

티스토리툴바