>  기사  >  웹 프론트엔드  >  CSS의 테두리 이미지 너비 속성을 사용하는 방법

CSS의 테두리 이미지 너비 속성을 사용하는 방법

青灯夜游
青灯夜游원래의
2019-05-30 16:43:493237검색

CSS border-image-width 속성은 이미지 테두리의 너비를 지정하는 데 사용됩니다. 4개의 값(음수 아님)을 설정하여 테두리 이미지를 9개 부분으로 나눌 수 있습니다. 이는 영역의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 안쪽으로의 거리를 나타냅니다.

CSS의 테두리 이미지 너비 속성을 사용하는 방법

CSS border-image-width 속성을 어떻게 사용하나요?

border-image-width 속성은 이미지 테두리의 너비를 지정합니다.

구문:

border-image-width: number|%|auto;

속성값:

number: 해당 테두리 너비의 배수를 나타냅니다.

%: 테두리 이미지 크기 영역: 가로 오프셋 너비의 영역 , 수직 오프셋 영역의 높이

auto: 지정된 경우 너비는 해당 이미지 슬라이스의 고유 너비 또는 높이입니다.

참고:

border-image-width 속성의 4개 값은 테두리 이미지를 9개 부분으로 나누기 위해 지정됩니다. 이는 영역의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 안쪽으로의 거리를 나타냅니다.

네 번째 값이 생략되면 두 번째 값과 동일합니다. 세 번째 값을 생략하면 첫 번째 값과 동일합니다. 두 번째 값을 생략하면 첫 번째 값과 동일합니다. 테두리 이미지 너비 값으로 음수 값은 허용되지 않습니다.

css border-image-width 속성 예

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div {
				border: 30px solid transparent;
				border-image: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
				border-image-width: auto;
				border-image-repeat: round;
				border-image-slice: 30;
			}
		</style>
	</head>
	<body>
		<div>DIV 使用图像边框</div>
		<p>使用的图片:</p>
		<img  src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="CSS의 테두리 이미지 너비 속성을 사용하는 방법" >

	</body>

</html>

렌더링:

CSS의 테두리 이미지 너비 속성을 사용하는 방법

위 내용은 CSS의 테두리 이미지 너비 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.