布局
box-decoration-break
Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
类 | 样式 |
---|---|
box-decoration-clone | box-decoration-break: clone |
box-decoration-slice | box-decoration-break: slice |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 box-decoration-slice
和 box-decoration-clone
工具控制背景、边框、边框图片、框阴影、剪辑路径、边距和填充等属性是否应渲染为元素是一个连续的片段还是不同的块:
¥Use the box-decoration-slice
and box-decoration-clone
utilities to control whether properties like background, border, border-image, box-shadow, clip-path, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks:
box-decoration-slice
Hello
World
World
box-decoration-clone
Hello
World
World
<span class="box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">Hello<br />World</span><span class="box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...">Hello<br />World</span>
响应式设计(Responsive design)
¥Responsive design
在 box-decoration-break
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="box-decoration-clone md:box-decoration-slice ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。