• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Borders</title>
7
    <style>
8
        #p_01 {
9
            padding: 20px;
10
            border: 20px solid transparent;
11
            -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
12
            -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
13
            -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
14
            border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
15
        }
16
    </style>
17
</head>
18
​
19
<body>
20
​
21
    <h1>수직 테두리와 수평 테두리의 스타일 설정</h1>
22
    <p id="p_01">수평 테두리는 반복으로, 수직 테두리는 늘리는 거로 설정했어요!</p>
23
    <p><br>위에서 사용한 원본 이미지는 다음과 같습니다.</p>
24
    <img src="/examples/images/img_css3_pattern.png">
25
​
26
</body>
27
​
28
</html>