box-decoration-break
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính box-decoration-break CSS chỉ định cách các đoạn của một phần tử được hiển thị khi bị ngắt qua nhiều dòng, cột hoặc trang.
Try it
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
<section id="default-example">
<div id="example-container">
<span id="example-element">This text breaks across multiple lines.</span>
</div>
</section>
#example-container {
width: 14rem;
}
#example-element {
background: linear-gradient(to bottom right, #6f6f6f, black);
color: white;
box-shadow:
8px 8px 10px 0 #ff1492,
-5px -5px 5px 0 blue,
5px 5px 15px 0 yellow;
padding: 0 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 2;
}
Cú pháp
/* Giá trị từ khóa */
box-decoration-break: slice;
box-decoration-break: clone;
/* Giá trị toàn cục */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;
Thuộc tính box-decoration-break được chỉ định bằng một trong các giá trị từ khóa liệt kê dưới đây.
Giá trị
slice-
Phần tử ban đầu được hiển thị như thể hộp của nó không bị phân mảnh, sau đó phần hiển thị của hộp giả thuyết này bị cắt thành các mảnh cho mỗi dòng/cột/trang. Lưu ý rằng hộp giả thuyết có thể khác nhau cho mỗi đoạn vì nó sử dụng chiều cao riêng nếu ngắt xảy ra theo hướng nội tuyến, và chiều rộng riêng nếu ngắt xảy ra theo hướng khối. Xem thông số kỹ thuật CSS để biết chi tiết.
clone-
Mỗi đoạn hộp được hiển thị độc lập với đường viền, padding và margin được chỉ định bao quanh mỗi đoạn.
border-radius,border-image, vàbox-shadowđược áp dụng cho từng đoạn một cách độc lập. Nền cũng được vẽ độc lập cho mỗi đoạn, nghĩa là hình nền vớibackground-repeat: no-repeatvẫn có thể lặp lại nhiều lần.
Mô tả
Giá trị được chỉ định sẽ ảnh hưởng đến giao diện của các thuộc tính sau:
Định nghĩa hình thức
| Initial value | slice |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
box-decoration-break =
slice |
clone
Ví dụ
Đoạn hộp nội tuyến
Một phần tử nội tuyến có trang trí hộp có thể có giao diện không mong muốn khi chứa ngắt dòng do giá trị slice mặc định.
Ví dụ sau đây cho thấy hiệu ứng của việc thêm box-decoration-break: clone vào một <span> chứa các thẻ <br>:
span {
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
}
#clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<p>
<span>The<br />quick<br />orange fox</span>
</p>
<p>
<span id="clone">The<br />quick<br />orange fox</span>
</p>
Đoạn hộp khối
Ví dụ sau đây cho thấy cách các phần tử khối có trang trí hộp trông như thế nào khi chứa ngắt dòng trong bố cục nhiều cột.
Lưu ý rằng kết quả của box-decoration-break: slice sẽ tương đương với <div> đầu tiên nếu xếp chồng theo chiều dọc.
span {
display: block;
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
inset 8px 8px 10px 0px deeppink,
inset -5px -5px 5px 0px blue,
inset 5px 5px 15px 0px yellow;
}
#base {
width: 33%;
}
.columns {
columns: 3;
}
.clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div id="base">
<span>The<br />quick<br />orange fox</span>
</div>
<br />
<h2>'box-decoration-break: slice'</h2>
<div class="columns">
<span>The<br />quick<br />orange fox</span>
</div>
<h2>'box-decoration-break: clone'</h2>
<div class="columns">
<span class="clone">The<br />quick<br />orange fox</span>
</div>
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Fragmentation Module Level 3 # break-decoration |