CSS3 tutorial-border-image 속성

오늘 Cui'er 자매는 테두리의 마지막 속성인 border-image 속성인 CSS3 튜토리얼을 설명할 것입니다. 이 글에서는 프론트엔드 개발 작업에 도움이 필요한 학생들에게 도움이 되기를 바라며 주로 이 속성의 정의와 사용법을 소개합니다.

구체적인 예 보기:

div 요소를 둘러싸는 테두리로 이미지 지정:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

브라우저 지원:

Internet Explorer 11, Firefox, Opera 15, Chrome 및 Safari 6에서는 border-image 속성을 지원합니다.

Safari 5는 대체 -webkit-border-image 속성을 지원합니다.

정의 및 사용법:

border-image 속성은 다음 속성을 설정하는 데 사용되는 약식 속성입니다.

border-image-source

border; -image-slice;

border-image-width;

border-image-outset;

border-image-repeat;

값이 생략된 경우 , 기본값이 설정됩니다.

팁: border-image-* 속성을 사용하여 아름답고 확장 가능한 버튼을 만드세요!

가능한 값:

위는 CSS3 tutorial-border-image 속성의 내용으로, 더 많은 관련 내용입니다. PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!