border-image-width
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æâ©.
CSSå±æ§ border-image-width æå®äº è¾¹çå¾å (border image) ç宽度
å°è¯ä¸ä¸
border-image-width: 30px;
border-image-width: 15px 40px;
border-image-width: 2.6rem;
border-image-width: 20% 8%;
<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-widthï¼è¾¹çå¾åå°ä¼å padding è¾¹ç¼å»¶å±
è¯æ³
/* å
³é®å */
border-image-width: auto;
/* é¿åº¦ */
border-image-width: 1rem;
/* ç¾åæ¯ */
border-image-width: 25%;
/* æ°å¼ */
border-image-width: 3;
/* åç´ | æ°´å¹³ */
border-image-width: 2em 3em;
/* ä¸ | 横å | ä¸ */
border-image-width: 5% 15% 10%;
/* ä¸ | å³ | ä¸ | å·¦ */
border-image-width: 5% 2em 10% auto;
/* å
¨å±å¼ */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
border-image-width å±æ§çå¼å¯ç¨ä»¥ä¸æ¹å¼è¿è¡è®¾å®ï¼
- å½æå® ä¸ä¸ª å¼æ¶ï¼å®å°ä½ç¨å° å个æ¹å ï¼
- å½æå® ä¸¤ä¸ª å¼æ¶ï¼å®å°åå«ä½ç¨å° åç´æ¹å å æ°´å¹³æ¹å ï¼
- å½æå® ä¸ä¸ª å¼æ¶ï¼å®å°åå«ä½ç¨å° ä¸æ¹ãæ°´å¹³æ¹åãåä¸æ¹ï¼
- å½æå® å个 å¼æ¶ï¼å®å°åå«ä½ç¨å° ä¸æ¹ãå³æ¹ãä¸æ¹åå·¦æ¹ã
åå¼
<é¿åº¦ - ç¾åæ¯>-
è¾¹çç宽度ï¼å¯æ
<length>æ<percentage>æå®ãç¾åæ¯æ¯ç¸è¾äºæ°´å¹³ï¼åç´ï¼æ¹åä¸çè¾¹æ¡å¾ååºå宽度ï¼é«åº¦ï¼çå移éï¼ä¸è½ä¸ºè´ã <æ°å¼>-
è¾¹æ¡å®½åº¦ï¼æå®ä¸º
border-widthçç¸åºåæ°ï¼ä¸è½ä¸ºè´ã auto-
å°çåäºå é¨å¯¹åºç
border-image-sliceç宽æé«ï¼å¯ç¨çè¯ï¼ãå¦æå¾å没æéè¦çç¸åºçå±æ§ï¼å°ç¸å¯¹äºborder-widthè¿è¡æå®ã
æ£å¼å®ä¹
| åå§å¼ | 1 |
|---|---|
| éç¨å ç´ | all elements, except internal table elements when border-collapse is collapse. It also applies to ::first-letter. |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| Percentages | refer to the width or height of the border image area |
| 计ç®å¼ | as specified, but with relative lengths converted into absolute lengths |
| å¨ç»ç±»å | æ计ç®å¼çç±»å |
æ£å¼è¯æ³
border-image-width =
[ <length-percentage [0,â]> | <number [0,â]> | auto ]{1,4}
<length-percentage> =
<length> |
<percentage>
示ä¾
Tiling a border image
示ä¾ä½¿ç¨äºä¸æ¹ 90*90 åç´ ç ".png" å¾åã
å æ¤ï¼æ¯ä¸ªåå为 30*30 åç´ ã
HTML
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
CSS
p {
border: 20px solid;
border-image: url("border.png") 30 round;
border-image-width: 16px;
padding: 40px;
}
ç»æ
è§è
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-image-width |