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 February 2017.
시도해보기
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 |
브라우저 호환성
BCD tables only load in the browser