©TCP-tryWWW

<!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% stretch;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
			border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
		}
		#p_02 {
			padding: 20px;
			border: 20px solid transparent;
			-webkit-border-image: url(/examples/images/img_css3_pattern.png) 46% stretch;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 46% stretch;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 46% stretch;
			border-image: url(/examples/images/img_css3_pattern.png) 46% stretch;
		}
		#p_03 {
			padding: 20px;
			border: 20px solid transparent;
			-webkit-border-image: url(/examples/images/img_css3_pattern.png) 80% stretch;
			-moz-border-image: url(/examples/images/img_css3_pattern.png) 80% stretch;
			-o-border-image: url(/examples/images/img_css3_pattern.png) 80% stretch;
			border-image: url(/examples/images/img_css3_pattern.png) 80% stretch;
		}
	</style>
</head>

<body>

	<h1>border-image 속성 - stretch 속성값</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>