CSS3 이미지 테두리 사용 예에 ​​대한 자세한 설명 border-image

CSS3에 소개된 많은 새로운 기능 중, 이 글에서는 주로 특정 참조 값을 갖는 css3pictureborder-image의 사용법을 소개합니다. 관심 있는 분들은 이에 대해 알아볼 수 있습니다.

CSS 속성 테두리에 대해서는 모두 믿습니다. WEB 개발자들은 이에 대해 매우 잘 알고 있습니다. HTML 요소 테두리의 너비, 색상, 스타일을 설정하여 HTML 요소에 이중선, 점선, 점선 등 다양한 테두리가 표시되도록 할 수 있습니다. 그러나 설정 방법에 관계없이 이는 매우 원시적인 관행입니다. CSS3부터 새로운 속성인 border-image가 있습니다. 이 속성을 사용하면 HTML 요소를 아름다운 작은 이미지로 둘러싸서 이미지 테두리로 표시할 수 있습니다. border-image 속성을 사용하면 매우 아름다운 테두리 스타일을 만들 수 있습니다.

HTML5의 새로운 입력 유형, 중국어 글꼴(웹 글꼴), 자리 표시자 등 CSS3에 도입된 많은 새로운 기능 중에서 매우 실용적이고 인기가 있으며, 예제 이전에 매우 아름다운 테두리 이미지도 인용했습니다. , 하지만 아직까지 인터넷에서 border-image를 사용하는 경우가 거의 없는 이유는 아마도 Google Chrome과 Firefox에서 오랫동안 지원해 왔고 IE11에서는 이 구문만 지원했기 때문인 것 같습니다.

border-image의 구문

코드는 다음과 같습니다.

<&#39;border-image-source&#39;> || <&#39;border-image-slice&#39;> [ / <&#39;border-image-width&#39;> | / <&#39;border-image-width&#39;>? / <&#39;border-image-outset&#39;> ]? || <&#39;border-image-repeat&#39;>

이 구문 설명은 모두가 매우 지루해 보이는데, 이것이 가장 이해하기 쉬운 몇 가지 예입니다.

이미지 테두리 border-image 사용법 1: 테두리 이미지의 순환 타일링(반복)

이 경우 테두리 이미지 이미지가 순차적으로 타일링되어 테두리 영역을 채웁니다.

<p id="repeat">图片将会循环贴满边框区域</p>

#repeat { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

예제 데모1:

그림 테두리 border-image 사용법 2: 테두리 이미지 적응형 루프 타일링(둥근)

위의 그림 테두리가 매우 아름답지만 첫 번째 결함은 요소의 너비 또는 높이가 테두리 이미지의 정수배가 아닌 경우 마지막/첫 번째 이미지가 완전히 표시될 수 없고 부분적으로 가려져 매우 보기 흉해 보인다는 것입니다. CSS3의 디자이너들은 이미 이 문제를 고려했으며, round 속성 값을 사용하면 이러한 상황을 피할 수 있습니다. 라운드의 기능은 각 이미지가 표시될 수 있도록 테두리 이미지를 약간 조정하여 보는 즐거움을 높이는 것입니다.

<p id="round">图片将会贴满边框区域</p>

#round { 
  border: 15px solid transparent;
  padding: 10px 20px;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old Firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

예시 시연 2

그림 테두리 border-image 사용법 3: 테두리 이미지 늘이기 및 타일링(늘리기)

'stretch'는 작은 그림을 늘려서 테두리 영역을 채우고, 반복하지 않고, 당연히 테두리 이미지가 변형될 것입니다.

<p id="stretch">图片将会拉伸贴满边框区域.</p>

rrree

시연 예 3

분명히 border-image 첫 번째 사용법은 일반적으로 사용하면 안 됩니다. 때로는 테두리가 불완전한 느낌을 갖게 되기 때문입니다. 두 번째와 세 번째 사용법은 각각의 장점이 있고 다른 아름다움을 가지고 있습니다. 여기에 사용된 테두리 이미지는 실제로 매우 간단합니다. 절묘한 예술은 이전 기사의 예와 같이 더 아름다운 테두리 이미지를 만들고 놀라운 효과를 만들어낼 수 있습니다. 이에 대해서는 아래에서 다시 보여드리겠습니다.

위 내용은 CSS3 이미지 테두리 사용 예에 ​​대한 자세한 설명 border-image의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!