CSS의 테두리 이미지 너비 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-30 16:43:493271검색
CSS border-image-width 속성은 이미지 테두리의 너비를 지정하는 데 사용됩니다. 4개의 값(음수 아님)을 설정하여 테두리 이미지를 9개 부분으로 나눌 수 있습니다. 이는 영역의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 안쪽으로의 거리를 나타냅니다.
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('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
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의 테두리 이미지 너비 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.