border-image-repeat 속성은 이미지 테두리를 반복할지, 늘일지, 둥글게 할지 지정하는 데 사용됩니다.
CSS3 border-image-repeat 속성
기능: 이미지 테두리를 반복할지, 늘릴지, 둥글게 할지 지정합니다.
구문:
border-image-repeat: stretch|repeat|round|space;
stretch: 이미지를 늘려 영역을 채우는 것을 의미합니다.
repeat: 이미지를 타일링(반복)하여 영역을 채우는 것을 의미합니다.
round: 반복 값과 유사합니다. 모든 이미지를 완전히 타일링할 수 없는 경우 이미지 크기가 영역에 맞게 조정됩니다.
space: 반복 값과 유사합니다. 모든 이미지를 완전히 타일링할 수 없는 경우 확장 공간이 이미지 주위에 분산됩니다.
설명: border-image-repeat 속성은 테두리 이미지의 가장자리와 중간을 확장하고 타일링하는 방법을 지정합니다. 따라서 두 개의 값을 지정할 수 있습니다. 두 번째 값을 생략하면 첫 번째 값과 동일한 값이 적용됩니다.
참고: Internet Explorer 10, Opera 12 및 Safari 5는 border-image-repeat 속성을 지원하지 않습니다.
CSS3 border-image-repeat 속성 사용 예
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin:50px;
border: 30px solid transparent;
border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
border-image-slice: 25;
}
.round{
border-image-repeat: round;
}
.repeat{
border-image-repeat: repeat;
}
.stretc{
border-image-repeat: stretc;
}
</style>
</head>
<body>
<div class="round">
DIV 使用图像边框--round
</div>
<div class="repeat">
DIV 使用图像边框--repeat
</div>
<div class="stretc">
DIV 使用图像边框--stretc
</div>
</body>
</html>Rendering:
이 기사에 대한 참조: https://www.html.cn/book/css/properties/border/ 국경-이미지-반복.htm
위 내용은 border-image-repeat 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
