邊框與外框
border-image-sliceborder-image-slice
Dividing a border image source into corner, edge, and center regions.
Overview
| Class | Declarations |
|---|---|
border-image-slice:<number> | border-image-slice: <number>;
|
border-image-slice:<percentage> | border-image-slice: <percentage>;
|
border-image-slice:<vertical>|<horizontal> | border-image-slice: <vertical> <horizontal>;
|
border-image-slice:<top>|<horizontal>|<bottom> | border-image-slice: <top> <horizontal> <bottom>;
|
border-image-slice:<top>|<right>|<bottom>|<left> | border-image-slice: <top> <right> <bottom> <left>;
|
border-image-slice:<number>|fill | border-image-slice: <number> fill;
|
Basic usage
Slice the source image
Use border-image-slice to divide the source image into corners, edges, and a center region. The center is discarded unless fill is included.
Slice 30
The slice value controls how the image is divided.
<div class="b:16px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30"> Slice 30</div>Preserve the center with fill
Use fill when the middle region of the source should be painted like a background.
<div class="b:16px|solid|transparent border-image-source:linear-gradient(45deg,dodgerblue,hotpink) border-image-slice:30|fill"> Filled center</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="border-image-slice:30:hover border-image-slice:30@sm border-image-slice:30@dark border-image-slice:30@print">…</div>