border-image-source
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
시도해 보기
border-image-source: url("/shared-assets/images/examples/border-diamonds.png"); border-image-source: url("/shared-assets/images/examples/border-stars.png"); border-image-source: repeating-linear-gradient( 45deg, transparent, #4d9f0c 20px ); border-image-source: none; <section id="default-example"> <div id="example-element">This is a box with a border around it.</div> </section> #example-element { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 50px; background: #fff3d4; color: #000; border: 30px solid; border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 round; font-size: 1.2em; } border-image-slice 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.
구문
css
/* 키워드 값 */ border-image-source: none; /* <image> 값 */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* 전역 값 */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; 값
none-
테두리 이미지를 사용하지 않습니다.
border-style이 대신 표시됩니다. <image>-
테두리에 사용할 이미지 참조입니다.
형식 구문
border-image-source =
none |
<image>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
예제
border-image에서 확인할 수 있습니다.
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |
| 초기값 | none |
|---|---|
| 적용대상 | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| 상속 | no |
| 계산 값 | none or the image with its URI made absolute |
| Animation type | discrete |