코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Borders</title> <style> #p_01 { padding: 20px; border: 20px solid transparent; -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round; -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round; -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round; border-image: url(/examples/images/img_css3_pattern.png) 34 round; } #p_02 { padding: 20px; border: 20px solid transparent; -webkit-border-image: url(/examples/images/img_css3_pattern.png) 22 round; -moz-border-image: url(/examples/images/img_css3_pattern.png) 22 round; -o-border-image: url(/examples/images/img_css3_pattern.png) 22 round; border-image: url(/examples/images/img_css3_pattern.png) 22 round; } #p_03 { padding: 20px; border: 20px solid transparent; -webkit-border-image: url(/examples/images/img_css3_pattern.png) 10 round; -moz-border-image: url(/examples/images/img_css3_pattern.png) 10 round; -o-border-image: url(/examples/images/img_css3_pattern.png) 10 round; border-image: url(/examples/images/img_css3_pattern.png) 10 round; } </style> </head> <body> <h1>border-image 속성 - round 속성값</h1> <p id="p_01">테두리 중간 부분의 처리를 반복으로 설정했어요!</p> <p id="p_02">테두리 중간 부분의 처리를 반복으로 설정했어요!</p> <p id="p_03">테두리 중간 부분의 처리를 반복으로 설정했어요!</p> <p><br>위에서 사용한 원본 이미지는 다음과 같습니다.</p> <img src="/examples/images/img_css3_pattern.png"> </body> </html>