CSS의 border-image-slice 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-30 11:26:432981검색
CSS border-image-slice 속성은 이미지 테두리의 안쪽 오프셋(상단, 오른쪽, 하단, 왼쪽)을 지정하는 데 사용됩니다. 이미지는 4개의 모서리, 4개의 측면 및 중간 영역의 9개 영역으로 나뉩니다. fill 키워드를 사용하지 않으면 이미지의 중간 부분이 삭제됩니다.
CSS border-image-slice 속성을 어떻게 사용하나요?
border-image-slice 속성은 이미지 테두리의 안쪽 오프셋을 지정합니다.
구문:
border-image-slice: number|%|fill;
속성 값:
● 숫자: 이미지의 픽셀(래스터 이미지인 경우) 또는 벡터 좌표(벡터 이미지인 경우)를 나타내는 숫자 값입니다.
● %: 이미지 크기에 대한 백분율 값: 이미지의 너비는 가로 오프셋에 영향을 주고 높이는 세로 오프셋에 영향을 줍니다.
● fill : 테두리 이미지의 중간 부분을 유지합니다.
참고:
이 속성은 이미지의 위쪽, 오른쪽, 아래쪽 및 왼쪽 가장자리의 안쪽 오프셋을 지정합니다. 이미지는 4개의 모서리, 4개의 측면 및 중간 영역의 9개 영역으로 나뉩니다. fill 키워드를 사용하지 않으면 이미지의 중간 부분이 삭제됩니다. 네 번째 값/백분율이 생략되면 두 번째 값과 동일합니다. 세 번째 값을 생략하면 첫 번째 값과 동일합니다. 두 번째 값을 생략하면 첫 번째 값과 동일합니다.
css border-image-slice 속성 예
<!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-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">
</body>
</html>
위 내용은 CSS의 border-image-slice 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!