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('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" alt="border-image-slice 속성을 사용하는 방법" > </body> </html>렌더링:
위 내용은 border-image-slice 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!