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 July 2015.
시도해 보기
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> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
예제
border-image에서 확인할 수 있습니다.
명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # the-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 |