border-image-source
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
border-image-source CSS å±æ§è®¾ç½®ç¨ä»¥å建å
ç´ è¾¹æ¡å¾åçæºå¾åã
å°è¯ä¸ä¸
border-image-source: url("/proxy/developer.mozilla.org/shared-assets/images/examples/border-diamonds.png");
border-image-source: url("/proxy/developer.mozilla.org/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("/proxy/developer.mozilla.org/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: revert;
border-image-source: revert-layer;
border-image-source: unset;
å¼
none-
ä¸ä½¿ç¨è¾¹æ¡å¾åï¼èç±
border-styleå®ä¹æå±ç°çå¤è§ã <image>-
ç¨ä½è¾¹æ¡çå¾çå¼ç¨ã
å½¢å¼å®ä¹
| åå§å¼ | none |
|---|---|
| éç¨å ç´ | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | none or the image with its URI made absolute |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼è¯æ³
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>
示ä¾
åºç¡ç¤ºä¾
css
.box {
border-image-source: url("image.png");
}
è§è
| è§è |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-source |
æµè§å¨å ¼å®¹æ§
åè§
borderoutlinebox-shadowbackground-image<url>ç±»å- MDN å客ï¼CSS ä¸çè¾¹æ¡å¾åï¼Interop 2023 çéç¹å ³æ³¨é¢åï¼2023ï¼