邊框與外框
border-image-widthborder-image-width
Setting the width of an element border image.
Overview
| Class | Declarations |
|---|---|
border-image-width:auto | border-image-width: auto;
|
border-image-width:<size> | border-image-width: <size>;
|
border-image-width:<vertical>|<horizontal> | border-image-width: <vertical> <horizontal>;
|
border-image-width:<top>|<horizontal>|<bottom> | border-image-width: <top> <horizontal> <bottom>;
|
border-image-width:<top>|<right>|<bottom>|<left> | border-image-width: <top> <right> <bottom> <left>;
|
Basic usage
Set the border image width
Use border-image-width to control how thick the painted border image is. It can be larger than the fallback border-width.
Image width 16
The painted image uses a wider border image area.
<div class="b:8px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-width:16"> Image width 16</div>Use automatic width
Use auto to derive the width from the slice value when possible.
<div class="b:16px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-width:auto"> Auto image width</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image-width:16:hover border-image-width:16@sm border-image-width:16@dark border-image-width:16@print">…</div>