Thuộc tính box-decoration-break dùng để kiểm soát trang trí hộp sau phân mảnh đoạn văn. Nó định nghĩa background, padding, border, margin và clip path khi hộp bị tách rời.
Giá trị mặc định: slice
Cú pháp:
box-decoration-break: slice|clone|initial|inherit;
Giá trị thuộc tính:
- slice: Thuộc tính này ngắt các cạnh của các đoạn tử một cách tổng thể.
- Clone: Dùng để trang trí từng đoạn tử như thể chúng là các phần tử riêng lẻ. Các đường viền bao quanh bốn cạnh của từng đoạn tử. Background được vẽ lại đầy đủ cho mỗi đoạn.
- initial: Đặt thuộc tính về giá trị mặc định ban đầu.
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính box-decoration-break: slice;.
HTML<!DOCTYPE html>
<html>
<head>
<title>box-decoration-break property</title>
<style>
body {
text-align: center;
width: 80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<h2>box-decoration-break: slice;</h2>
<span class="geek">
Prepare for the Recruitment drive
of product based companies<br>
like Microsoft, Amazon, Adobe etc
with a free online placement<br>
preparation course. The course focuses
on various MCQ's & Coding<br>
question likely to be asked in the
interviews & make your<br>
upcoming placement season efficient
and successful.
</span>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính box-decoration-break: clone;.
HTML<!DOCTYPE html>
<html>
<head>
<title>box-decoration-break property</title>
<style>
body {
text-align: center;
width: 80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek {
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<h2>box-decoration-break: clone;</h2>
<span class="geek">
Prepare for the Recruitment drive
of product based companies<br>
like Microsoft, Amazon, Adobe etc
with a free online placement<br>
preparation course. The course focuses
on various MCQ's & Coding<br>
question likely to be asked in the
interviews & make your<br>
upcoming placement season efficient
and successful.
</span>
</body>
</html>
Đầu ra:
Ví dụ: Trong ví dụ này, ta sử dụng thuộc tính box-decoration-break: initial;.
HTML<!DOCTYPE html>
<html>
<head>
<title>box-decoration-break property</title>
<style>
body {
text-align: center;
width: 80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek {
-webkit-box-decoration-break: initial;
-o-box-decoration-break: initial;
box-decoration-break: initial;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<h2>box-decoration-break: initial;</h2>
<span class="geek">
Prepare for the Recruitment drive
of product based companies<br>
like Microsoft, Amazon, Adobe etc
with a free online placement<br>
preparation course. The course focuses
on various MCQ's & Coding<br>
question likely to be asked in the
interviews & make your<br>
upcoming placement season efficient
and successful.
</span>
</body>
</html>
Đầu ra:
Các trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ box-decoration-break Property được liệt kê dưới đây:
- Google Chrome
- Firefox
- Edge 79
- Opera
- Safari
- Internet Explorer không được hỗ trợ