CSS의 border-image 속성은 처음에는 생각을 정리하는 데 약간 까다롭습니다. 이 기사에서는 border-image 속성이 무엇인지, 어떻게 사용하는지, 다른 브라우저에서 사용할 때의 특성에 대해 설명합니다.
CSS 교육의 이 시점에서 우리는 border 속성이 무엇인지 알아야 합니다. 새로 고침하려면 속기를 사용하여 요소 주위에 테두리를 지정하는 속성입니다. 다음과 같은 구조를 가지고 있습니다:
border: 2px /*width*/ dashed /*style*/ green; /*color*/
테두리와 마찬가지로 border-image 속성은 소스 이미지를 사용하여 요소 주위에 테두리를 구성하는 약식 속성입니다. 다음과 같은 구조를 가지고 있습니다:
border-image:
url("https://www.placekitten.com/501/700") /*source*/
25% / /*slice*/
70px / /*width*/
2px /*outset*/
stretch; /*repeat*/ - 테두리 이미지 소스:
border-image-source는 CSS에서 border-image 속성의 소스 부분에 대한 속성입니다. 실제 이미지에 대한 상대 경로 또는 이미지 URL이 있는 URL이나 일종의 그라디언트인 URL을 사용합니다.
- 테두리 이미지 슬라이스:
border-image-slice 속성은 border-image 속성의 슬라이스 부분에 대한 속성 이름입니다. 이미지를 9개의 개별 섹션으로 나눕니다.
기본적으로 이미지의 나머지 부분이 속성을 사용 중인 요소를 둘러쌀 수 있도록 가운데가 제거됩니다. border-image-slice 속성은 최대 4개의 숫자(%)를 사용하여 슬라이스가 위치할 위치를 지정할 수 있습니다. 채우기라는 단어를 사용할 수도 있습니다. 중간 섹션을 사용하려는 경우.
- 테두리 이미지 너비:
border-width 속성과 마찬가지로 border-image-width 속성은 테두리 이미지의 너비를 나타냅니다. 백분율 또는 rems/ems/px를 사용할 수 있으며 테두리의 각 측면이 고유한 너비를 가질 수 있도록 최대 4개의 숫자를 사용할 수 있습니다.
- 테두리 이미지 시작:
border-image-outset 속성은 이미지 테두리가 요소의 테두리 상자에서 얼마나 멀리 떨어져 있는지 설정합니다. 참고로 테두리 상자는 패딩과 여백 사이의 영역인 상자 모델의 일부입니다. 숫자가 높을수록 테두리 상자에서 멀어집니다. 필요한 경우 각 측면에 고유한 값이 있도록 최대 4개의 값이 필요합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
- 테두리 이미지 반복:
border-image-repeat 속성은 각 가장자리가 어떻게 작동할지 설정합니다(가장자리는 이미지의 모서리를 포함하지 않는 각 측면입니다). 최대 2개의 값이 필요합니다. 하나의 값을 지정하면 모든 가장자리에 적용되고 두 개의 값을 지정하면 첫 번째 값은 위쪽과 아래쪽에 적용되고 두 번째 값은 왼쪽과 오른쪽에 적용됩니다. 값은 늘어날 수 있음일 수 있습니다. , 반복 , 둥근 또는 공백 .
브라우저의 단점
Firefox와 Safari는 각 개별 속성을 자체적으로 사용하여 테두리 이미지를 만들 수 있는 가장 일반적인 브라우저입니다. Chrome에서는 단축 속성만 사용할 수 있으며 테두리 스타일과 함께 사용해야 합니다. 우리가 갖고 싶은 경계의 상단을 알려줄 속성(실선, 점선 등). Chrome을 사용 중이고 제대로 작동하지 않는 경우 이 점을 확인하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* Below only works in Firefox and Safari*/
border-image-source: url(https://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* This way will NOT work in Chrome */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(https://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* Above works in all browsers. Firefox and Safari you can use the border-image prop without using the border-style property. In Chrome you MUST use the border-style prop in order for the image to show up on the webpage */
}
</style>
</head>
<body>
<div class="border-image-box flex">
This is a box. It's using each of the individual border-image
properties to style
</div>
<div class="border-image-shorthand flex">
This is a box. It's using the border-image shorthand to style
</div>
</body>
</html> 스타일을 지정합니다. 이 튜토리얼에서는 border-image 속성을 사용하여 요소 주위에 CSS 이미지 테두리를 만드는 방법을 배웠습니다. border-image-source, border-image-slice, border-image-width, border-image-outset 및 border-image-repeat로 구성된 약식 속성입니다. 모든 브라우저와 호환되도록 하려면 border-image 값을 지정하기 전에 border-style을 solid로 설정하십시오.