CSS 테두리 이미지로 웹을 장식합니다

이전에는 웹 페이지 (예 : 멋진 국경)에 장식 요소를 추가하려면 이미지를 자르고 효과가 만족 스러울 때까지 CSS 코드를 참을성있게 조정해야했습니다.

CSS는 이제이 프로세스를 단순화합니다. 웹 사이트에 다소 복잡한 경계를 추가하기 위해 몇 줄의 코드 만 있습니다. 이 기사에서는이 작업을 수행하는 방법을 보여줍니다.

키 포인트

CSS를 사용하면 속성을 ​​사용하여 테두리에 배경 이미지를 추가하는 등 몇 줄의 코드가있는 웹 페이지에 복잡한 테두리를 추가 할 수 있습니다. 속성 선택한 이미지를 테두리에 적용하여 이미지를 9 개의 영역으로 나누어 4 개의 모서리, 4면 및 1 개의 중간 영역을 선택할 수 있습니다. .

속성 테두리 이미지 영역 내에서 내부 오프셋을 설계하는 반면 속성은 테두리 이미지 영역을 테두리 프레임 밖으로 밀어 낼 수 있도록합니다.

당신은 약어 속성을 ​​사용하여 속성을 ​​재설정 할 수 있으며, 이는 요소의 네 가지 경계 모두의 너비, 색상 및 스타일을 빠르게 재설정 할 수 있습니다. 글을 쓰는 시점에서
• 는 거의 모든 주요 브라우저에서 완전히 지원됩니다. border-image-source
• 테두리 이미지 속성 경계 스타일을 설정하는 일반적인 방법은 사전 설정 border-image-slice 규칙을 사용하는 것입니다. 이 규칙에는 다음이 포함됩니다. ,
,
• , border-image-width, , border-image-outset,
,
• , 및 . border 이 스타일은 이미 상당히 몇 가지 옵션을 제공합니다. 그러나 한 걸음 더 나아가 다음 CSS 속성을 사용하여 테두리에 매력적인 배경 이미지를 추가 할 수 있습니다. border-image 속성 이 속성을 사용하면 배경 이미지를 요소 테두리에 할당 할 수 있습니다. 이 값은 일반적으로 이미지의 URL입니다. border-image CSS 그라디언트 효과가 훌륭하다는 것을 알게 될 것입니다 :

브라우저에서는 다음과 같이 보입니다 이 속성을

값으로 설정하거나 이미지를 표시 할 수없는 경우 브라우저는 속성에 대한 값을 사용합니다. 따라서 를 백업 계획으로 사용하는 것이 가장 좋습니다.

사용중인 이미지는 테두리의 너비와 높이와 일치 할 필요가 없습니다. CSS 국경 이미지의 아름다움은 다양한 화면 크기에 적응하는 요소를 포함하여 폭과 높이의 요소 경계를 장식하기 위해 작은 이미지 만 필요하다는 것입니다.

속성 속성이있는 이미지를 선택한 후 속성을 ​​사용하여 테두리에 적용 할 수 있습니다. border-style

element {
  border-image-source: url('myimage.png');
}

더 자세히 배우자. 이 속성 설계는 상단, 오른쪽, 하단 및 왼쪽의 내부 오프셋에서 나옵니다. 이 오프셋은 결국 작은 이미지를 9 개의 영역과 같은 9 개의 영역으로 자릅니다 : 4 개의 모서리, 4면 및 1 개의 중간 영역.

<<> 1 ~ 4 개의 숫자 또는 백분율 값을 지정할 수 있습니다. 네 가지 값을 지정하면 상단, 오른쪽, 하단 및 왼쪽 오프셋에 적용됩니다. 왼쪽 오프셋을 건너 뛰면 오른쪽 오프셋과 동일합니다. 하단 오프셋을 놓친 경우 상단과 동일합니다. 오른쪽으로 오프셋의 값을 생략하면 상단과 동일하게됩니다. 하나의 값 만 사용하는 경우 4 개의 오프셋 모두에 사용됩니다.

백분율 값은 이미지 크기의 백분율, 즉 수평 오프셋의 이미지 너비와 수직 오프셋의 이미지 높이를 나타냅니다. 숫자는 이미지 또는 벡터 이미지의 경우 좌표의 픽셀을 나타냅니다. 또 다른 요점, 숫자 후에 를 추가하지 마십시오. 이것은 작동하지 않습니다!

다음은

:

를 사용하는 방법입니다

px 크기 100 x 100 픽셀의 이미지를 테두리로 사용하면 외관은 다음과 같습니다.

<<> 최종 효과는 다음과 같습니다

<<> 중간 영역은 완전히 투명 해 보이므로 보이지 않습니다. 보이려면 <🎜 🎜> 키워드를 추가하십시오. border-image-slice 예를 들어,

키워드를 추가하지 않고 완전히 불투명 한 중간 영역이있는 이미지를 사용하는 것은 위의 예와 정확히 동일합니다. 그러나 다음과 같이 키워드를 적용하십시오 :

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-slice: 19;
}

중간 영역에 세부 사항이 포함 된 이미지를 사용하십시오. <🎜 🎜> <<> 그러면 이미지의 중간 영역이 페이지에서 완전히 볼 수 있음을 알게됩니다.

<<>

<🎜 🎜> <<> 속성 <🎜 🎜> 이 속성은 소위 테두리 이미지 영역 내에서 그려집니다. 기본적 으로이 영역의 경계는 테두리 박스의 경계입니다. 속성과 마찬가지로

는 내부 오프셋을 설계하여 이미지를 9 개의 영역으로 나눕니다. 이 속성은 1 ~ 4 개의 값 (상단, 오른쪽, 하단, 왼쪽)을 허용하며 숫자 또는 백분율을 사용할 수 있습니다. 백분율은 테두리 이미지 영역의 크기, 즉 수평 오프셋의 면적 폭 및 수직 오프셋의 면적 높이와 관련이 있습니다. 단위가없는 숫자를 사용하는 경우이 숫자는 해당 계산 된 테두리 너비의 배수와 같습니다. 예를 들어, 다음 코드 :

element {
  border-image-source: url('myimage.png');
}

… 테두리 이미지의 너비를 테두리 너비 값의 3 배, 즉 19 픽셀로 설정하십시오. 결과는 다음과 같습니다.

<🎜 🎜> <<>> 동일한 값을

및

에 할당하면 경계 이미지가 원치 않는 변형없이 최상의 조건으로 표시되도록합니다. <🎜 🎜> <<> 속성 <🎜 🎜> 지금까지 사용한 모든 속성은 임베디드 테두리 이미지 영역에 기본값을 받았습니다. 그러나 테두리 이미지 영역을 테두리 상자 외부에서 밀어 넣을 수 있습니다. <<> 속성을 ​​사용하여 구현할 수 있습니다. border-image-width 이 속성은 1 ~ 4 개의 값 (상단, 오른쪽, 하단, 왼쪽)을 취하며 길이 (예 : <🎜 🎜>, <🎜 🎜> 등)로 표시됩니다. 숫자를 사용하는 경우 결과는 테두리 이미지가 테두리 상자 밖으로 밀려 나고 배수는 계산 된 테두리 너비입니다. border-image-slice 더 설명하기 위해, 나는 테두리를 나타내는 녹색 점선을 그렸습니다. 테두리 이미지 영역에는 분홍색 테두리 이미지가 포함되어 있습니다. 기본 임베디드 상태에서 국경 이미지는 녹색 개요 내에 있습니다. 이것은 테두리 이미지 영역이 테두리 프레임 내에 있음을 의미합니다.

<🎜 🎜> <<> CSS 규칙 세트에

를 추가하면 핑크색 테두리 이미지를 점선 녹색 개요를 넘어냅니다. 이것은 국경 이미지 영역이 국경 밖에서 그려 져 있음을 의미합니다. <🎜 🎜> <<> 테두리 상자 외부에있는 테두리 이미지 부분은 스크롤을 트리거하지 않으며 마우스 이벤트를 캡처하지 않습니다. border-image-outset <🎜 🎜> <<> 속성 <🎜 🎜> 이 속성은 테두리의 측면과 중간 부분에서 이미지 슬라이스를 확장하고 타일하는 방법에 대한 선택을 제공합니다. 첫 번째 값은 수평 측 (상단 및 하단)에 적용되고 두 번째 값은 수직 측면 (오른쪽 및 왼쪽)에 적용됩니다. 하나의 값 만 설정하면 값이 수평 및 수직 측면 모두에 적용됩니다.

<:> 가용 값은 다음과 같습니다

<🎜 🎜> <<> -
• 속성을 ​​사용하지 않으면 기본값입니다. 이 키워드는 사용 가능한 영역을 채우기 위해 이미지를 확장합니다. stretch border-image-repeat <<> - 이미지 타일링은 사용 가능한 영역을 채우기 위해 반복됩니다. 사용 가능한 영역을 타일 너비로 나눌 수없는 경우 이미지가 차단 될 수 있습니다.
• <<> - <🎜 <<>와 동일하지만 공간이 타일을 수용하기에 충분하지 않으면 타일이 모두 맞을 때까지 스케일링됩니다. 이렇게하면 타일링이 절대로 차단되지 않도록하지만 이미지가 약간 압축 될 수 있습니다. repeat <🎜 🎜> <<> - <🎜 🎜>와 동일하지만 공간이 타일 폭의 정확한 배수가 아닌 경우 여분의 공백이 각 타일 주위에 고르게 분포됩니다.
• 이 글을 쓰는 시점에서 Firefox는 round와 동일하게 repeat를 렌더링하는 반면 Chrome은 <🎜
와 <🎜 🎜>와 동일하게 렌더링하는 것으로 보입니다.
• <🎜 🎜> <<> 약어 속성 space 위에서 논의 된 모든 개별 속성을 다음과 같이 <code>repeat</code> 약어 속성으로 압축 할 수 있습니다. </li> </ul> <<> <p> <code>space</code> <<> <code>stretch</code> <code>space</code> <<> <code>repeat</code> </p> <<> <h3> <code>border-image</code> <<> </h3> <p> <a> 다음은 코드 스 니펫입니다 <code>border-image</code> <do> 테두리 이미지를 삭제하려면 어떻게해야합니까? </p> <to> 테두리를 재설정하는 가장 좋은 방법은 약어 <ol> 속성을 ​​사용하는 것입니다. <li>를 사용하면 요소의 네 가지 경계 모두의 동일한 너비, 색상 및 스타일을 빠르게 재설정 할 수 있습니다. <code>border-image-source</code> 규칙을 지정할 필요가 없으며 단일 <🎜 </li> 속성을 ​​무시할 필요가 없습니다. <li> <support> 브라우저 지원 <🎜 🎜> 글을 쓰는 시점에서 <of>는 거의 모든 주요 브라우저에서 완전히 지원됩니다. Firefox만이 요소에 걸쳐 SVG 이미지를 늘릴 수 없으며 Opera Mini는 <code>border-image-slice</code> 접두사로 약어 구문을 지원하지만 단일 속성을 지원하지 않습니다. </li> <li> 결론 <code>border-image-width</code> 이 기사는 주로 </li> 속성 : 허용하는 값, 사용하는 가장 좋은 방법 및 브라우저 지원 레벨을 소개합니다. <li> <more> CSS 배경 및 Border Level 3 사양 문서에서 자세한 내용을 찾을 수 있습니다. <code>border-image-outset</code> <the> 프로젝트에서 </li> 속성을 ​​사용하는 경우 커뮤니티와 최종 결과를 공유하지 않겠습니까? <li> <your> 답장을 기대합니다! <code>border-image-repeat</code> CSS 테두리 이미지가있는 웹 페이지를 장식하는 <(> FAQ (FAQ) <c> CSS 테두리 이미지를 만드는 방법은 무엇입니까? </li> <s> CSS 테두리 이미지 생성에는 </ol> 속성을 ​​사용하는 것이 포함됩니다. 이 속성을 사용하면 요소 주변의 경계로 사용되는 이미지를 지정할 수 있습니다. 이 속성의 구문은 다음과 같습니다<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>element { border-image-source: url('myimage.png'); }
  로그인 후 복사

로그인 후 복사