形狀與遮罩
裁剪路徑clip-path
Creating a clipping region.
Overview
| Class | Declarations |
|---|---|
clip-none | clip-path: none;
|
clip-margin | clip-path: margin-box;
|
clip-border | clip-path: border-box;
|
clip-padding | clip-path: padding-box;
|
clip-content | clip-path: content-box;
|
clip-fill | clip-path: fill-box;
|
clip-stroke | clip-path: stroke-box;
|
clip-view | clip-path: view-box;
|
clip-path:<value> | clip-path: <value>;
|
clip-path:inset(<…>) | clip-path: inset(<…>);
|
clip-path:circle(<…>) | clip-path: circle(<…>);
|
clip-path:ellipse(<…>) | clip-path: ellipse(<…>);
|
clip-path:polygon(<…>) | clip-path: polygon(<…>);
|
clip-path:path(<…>) | clip-path: path(<…>);
|
clip-path:url(<…>) | clip-path: url(<…>);
|
Examples
Clip to a circle
Use clip-path:circle(*) to apply a circular clip path.
<img class="clip-path:circle(40px)" src="/images/avatar.jpg" alt="Avatar">Generated CSS
@layer utilities { .clip-path\:circle\(40px\) { clip-path: circle(40px) }}Clip with an inset
Use clip-path:inset(*) with | between values when the inset has multiple sides.
<div class="clip-path:inset(0|20px)"> Cropped content</div>Remove clipping
Use clip-none when a responsive or state variant should restore the full element.
<img class="clip-path:circle(40px) clip-none@sm" src="/images/avatar.jpg" alt="Avatar">Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="clip-path:inset(0|20px):hover clip-path:circle(40px)@sm clip-none@print">...</div>