邊框與外框
border-image-outsetborder-image-outset
Setting how far the border image extends beyond the border box.
Overview
| Class | Declarations |
|---|---|
border-image-outset:<size> | border-image-outset: <size>;
|
border-image-outset:<vertical>|<horizontal> | border-image-outset: <vertical> <horizontal>;
|
border-image-outset:<top>|<horizontal>|<bottom> | border-image-outset: <top> <horizontal> <bottom>;
|
border-image-outset:<top>|<right>|<bottom>|<left> | border-image-outset: <top> <right> <bottom> <left>;
|
Basic usage
Extend the border image outside the box
Use border-image-outset to paint the border image beyond the element's border box. The outset area does not create extra layout space.
Outset 8
The painted border image extends outward.
<div class="b:12px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-outset:8"> Outset 8</div>Use separate vertical and horizontal values
<div class="b:12px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30 border-image-outset:8|16"> Vertical and horizontal outset</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image-outset:8:hover border-image-outset:8@sm border-image-outset:8@dark border-image-outset:8@print">…</div>