CSS3의 border-image 속성에 대한 자세한 소개

border-image 속성을 사용하는 원래 의도는 복잡한 작업을 단순화하는 것임을 알고 있습니다. 이 속성을 익히면 코딩 시간과 효율성이 크게 절약된다는 것을 알 수 있습니다. 다음으로 border-image 사용법을 알려드리겠습니다.

요소 테두리가 불규칙한 상황. 이때, 테두리 배경으로 디자인 도면을 사용해야 합니다. 배경 이미지에 비해 테두리 이미지는 코드를 사용하여 테두리 배경의 늘이기 및 반복을 제어할 수 있다는 장점이 있습니다.

의 효과는 버튼의 너비와 높이가 불확실할 때입니다. 테두리 이미지를 사용하여 버튼을 만듭니다. 동일한 배경 이미지를 사용하여 다양한 너비와 높이의 버튼을 만들 수 있습니다.

테두리-이미지 속성 분석

테두리 배경이미지. 형식은 url("...")입니다.

border-image-slice

이미지 테두리가 안쪽으로 오프셋되는 거리입니다. 형식: border-image-slice: 상단 오른쪽 하단 왼쪽. 배경 이미지를 위쪽, 오른쪽, 아래쪽, 왼쪽에서 자르는 4개의 선 사이의 거리를 각각 참조합니다.

거리는 숫자 값과 백분율을 허용합니다. 기본값 단위는 px이지만 값 뒤에 px를 추가할 수 없습니다. 그렇지 않으면 이 CSS가 브라우저에서 구문 분석되지 않습니다. 사용법은 margin 및 padding과 유사합니다. 여기서는 숫자 값을 예로 사용하고 백분율에도 동일하게 적용됩니다.

border-image-slice: 10; /*거리는 위에서 아래로, 좌우로 10px입니다.*/

border-image-slice: 10 30; /*거리는 위에서 아래로 10px, 30px입니다. 왼쪽과 오른쪽으로;*/

border-image-slice : 10 30 20; /*거리는 위에서 10px, 아래에서 20px, 왼쪽에서 30px입니다.*/

border-image-slice : 10 30 20 40; /*거리는 위에서 10px, 오른쪽에서 30px, 아래에서 20px, 왼쪽에서 40px입니다.*/

네 줄은 배경 이미지를 9개 부분으로 나눕니다. 8개 영역 1, 2, 3, 4, 6, 7, 8, 9가 그림 테두리로 잘립니다. 값이나 백분율을 설정하는 것 외에 "채우기"를 추가하면 영역 5도 잘립니다. 다음과 같이 요소 콘텐츠를 배경으로 채웁니다.

border-image-slice: 25 11 fill; 배경 이미지의 너비보다 크면 위쪽 및 아래쪽 테두리가 표시되지 않습니다. 슬라이스의 위쪽 및 아래쪽 거리의 합이 배경 이미지의 높이보다 크면 왼쪽 및 오른쪽 테두리가 표시되지 않습니다.

border-image-width

이미지 테두리의 너비입니다. 숫자값만 허용되며, 단위는 추가할 수 없습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5로 불꽃놀이 입자 특수 효과를 만드는 방법

HTML 웹 페이지 최적화 및 압축을 구현하는 단계

웹 페이지에서 h 태그를 사용한 개발 경험

위 내용은 CSS3의 border-image 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!