Các box-decoration-breakbất động sản cho phép bạn kiểm soát cách trang trí hộp được rút ra qua những mảnh vỡ của một yếu tố “bị hỏng”. Một phần tử có thể chia thành các đoạn ở cuối dòng, trên cột hoặc ở ngắt trang.
.module ( box-decoration-break: clone; )Các tính chất trang trí hộp điều khiển bởi box-decoration-breakbao gồm: background(và nó phụ thuộc), border, border-radius, border-image, box-shadow, margin, và padding.
Giá trị
slice: giá trị ban đầu. Trang trí hộp áp dụng cho toàn bộ phần tử và phá vỡ ở các cạnh của các mảnh phần tử.clone: trang trí áp dụng cho từng mảnh của phần tử như thể các mảnh đó không bị đứt đoạn, các phần tử riêng lẻ. Đường viền bao bọc bốn cạnh của mỗi mảnh phần tử và nền được vẽ lại đầy đủ cho mỗi mảnh.
Sử dụng
box-decoration-break có thể giúp duy trì một thiết kế nhất quán giữa các phần của một phần tử bị hỏng.
Trong hình ảnh ví dụ này, một đoạn văn có viền màu cam và lề trên cùng là 1em bị ngắt qua hai cột. Đoạn trên cùng có box-decoration-breakgiá trị ban đầu là slice. Đoạn dưới cùng có clonegiá trị.
Bài báo và bản demo về điều đó.
Bản giới thiệu
Tài box-decoration-breaksản có hỗ trợ trình duyệt hạn chế. Bản demo này hoạt động tốt nhất trong Firefox 37+, nơi box-decoration-breakđược hỗ trợ đầy đủ.
Xem Bút 1074b03653ffb32b88a6f88823c3de34 của CSS-Tricks (@ css-trick) trên CodePen.
Hỗ trợ trình duyệt
Tại thời điểm viết bài này, chỉ có Firefox hỗ trợ đầy đủ box-decoration-break. Trình duyệt Webkit và Opera hỗ trợ một phần box-decoration-breakcác phần tử nội tuyến trên các ngắt dòng, nhưng không hỗ trợ trên các ngắt cột hoặc trang.
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | không ai | 4,4 * | 7.1 * |
* hỗ trợ một phần với -webkittiền tố.