border-image-slice 속성을 사용하는 방법-CSS 튜토리얼-php.cn

border-image-slice 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-02-12 14:48:09

원래의

4257명이 탐색했습니다.

border-image-slice 속성은 이미지 테두리의 내부 오프셋(상단, 오른쪽, 하단, 왼쪽)을 지정하는 데 사용됩니다. 특정 단위 값은 없으며 간단한 숫자 값을 제공하거나 설정하기만 하면 됩니다. 백분율로.

border-image-slice 속성을 사용하는 방법

CSS3 테두리 이미지 슬라이스 속성

#🎜🎜 #

기능: 이미지의 위쪽, 오른쪽, 아래쪽 및 왼쪽 가장자리의 안쪽 오프셋을 지정합니다. 테두리 이미지를 9개 영역(모서리 4개, 측면 영역 4개, 가운데 1개)으로 자릅니다. Area , 즉 9개의 정사각형 그리드입니다.

구문:

border-image-slice: number|%|fill;

로그인 후 복사

number: 숫자 값, 픽셀(래스터 이미지인 경우) 또는 벡터 좌표(래스터 이미지인 경우)를 나타냅니다. 벡터 이미지)를 이미지에서).

%: 이미지 크기에 대한 백분율 값: 이미지의 너비는 가로 오프셋에 영향을 주고 높이는 세로 오프셋에 영향을 줍니다.

fill : 테두리 이미지의 중간 부분을 유지합니다.

참고: 키워드 채우기를 사용하지 않으면 이미지의 중간 부분이 삭제됩니다. 네 번째 값/백분율이 생략되면 두 번째 값과 동일합니다. 세 번째 값을 생략하면 첫 번째 값과 동일합니다. 두 번째 값을 생략하면 첫 번째 값과 동일합니다.

CSS3 border-image-slice 속성 사용 예:

내부 편향을 지정합니다. 이미지 테두리 이동:

<!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-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="border-image-slice 속성을 사용하는 방법" >
</body>
</html>

로그인 후 복사

렌더링:

border-image-slice 속성을 사용하는 방법