집 > 기사 > 웹 프론트엔드 > CSS3 이미지 테두리 사용에 대해 border-image

CSS3 이미지 테두리 사용에 대해 border-image

不言원래의: 2018-06-28 10:39:472377검색

CSS3에 소개된 많은 새로운 기능 중, 이 글에서는 주로 css3 이미지 테두리 border-image의 사용법을 소개하는데, 관심 있는 분들은 이에 대해 알아볼 수 있습니다.

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

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

그림 테두리 테두리-이미지 구문

<&#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:

image border 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

Picture border border-image 사용법 3: 테두리 이미지를 늘이고 타일링합니다(stretch)

'stretch'는 작은 그림을 늘이는 것입니다. 반복하지 않고 테두리 영역을 채우려면 분명히 테두리 이미지가 변형됩니다. ㅋㅋㅋ 두 번째와 세 번째 사용법은 각각의 장점이 있고 다른 아름다움을 가지고 있습니다. 여기에 사용된 테두리 이미지는 실제로 매우 간단합니다. 절묘한 예술은 이전 기사의 예와 같이 더 아름다운 테두리 이미지를 만들고 놀라운 효과를 생성할 수 있습니다. 이에 대해서는 아래에서 다시 보여 드리겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3 이미지 테두리 사용에 대해 border-image

관련 기사