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 |
브라우저 호환성
Loading…