> 웹 프론트엔드 > CSS 튜토리얼 > border-image-width 속성을 사용하는 방법

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

青灯夜游
풀어 주다: 2019-02-12 15:20:16
원래의
3257명이 탐색했습니다.

border-image-width 속성은 이미지 테두리의 너비를 지정하는 데 사용됩니다. 4가지 값을 설정하여 테두리 이미지 영역을 오프셋의 9개 부분으로 나눌 수 있습니다. 이는 위쪽, 오른쪽, 아래쪽, 왼쪽을 나타냅니다. 그리고 양측 안쪽 거리.

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

CSS3 border-image-width 속성

기능: 이미지 테두리의 너비를 지정합니다.

구문: ​​

border-image-width: number|%|auto;
로그인 후 복사

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

%: 참조 프레임 이미지 영역의 크기 - 영역의 높이는 수평 오프셋에 영향을 미치고 너비는 수직 오프셋에 영향을 미칩니다.

auto: 이 속성이 지정되면 너비는 해당 이미지 조각의 고유 너비입니다.

설명: border-image-width 속성의 4개 값은 테두리 이미지를 9개 부분으로 나누는 오프셋을 지정합니다. 이는 영역의 위쪽, 오른쪽, 아래쪽 및 왼쪽에서 안쪽으로의 거리를 나타냅니다. 네 번째 값을 생략하면 두 번째 값과 동일합니다. 세 번째 값을 생략하면 첫 번째 값과 동일합니다. 두 번째 값을 생략하면 첫 번째 값과 동일합니다. 테두리 이미지 너비 값으로 음수 값은 허용되지 않습니다.

참고: Internet Explorer 10 및 이전 버전, Opera, Safari 5 및 이전 버전은 border-image-width 속성을 지원하지 않습니다.

CSS3 border-image-width 속성 사용 예

div
{
border-image-source: url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg);
border-image-width: 30 30;
}
로그인 후 복사

위 내용은 border-image-width 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿