La propiedad box-decoration-break se usa para controlar la decoración de la caja después de la fragmentación del párrafo. Define el fondo, el relleno, el borde, el margen y la ruta de recorte de un elemento que se aplica cuando el cuadro del elemento se divide en partes separadas.
Valor por defecto:
- rodaja
Sintaxis:
box-decoration-break: slice|clone|initial|inherit;
Valores de propiedad:
slice: esta propiedad rompe los bordes de los fragmentos del elemento como un todo.
- Sintaxis:
box-decoration-break: slice;
- Ejemplo:
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>
- Producción:
Clon: Se utiliza para decorar cada fragmento del elemento como si los fragmentos fueran elementos individuales, ininterrumpidos. Los bordes envuelven los cuatro bordes de cada fragmento del elemento y los fondos se vuelven a dibujar por completo para cada fragmento.
- Sintaxis:
box-decoration-break: clone;
- Ejemplo:
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>
- Producción:
initial: Establece la propiedad a su valor por defecto.
- Sintaxis:
box-decoration-break: initial;
- Ejemplo:
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>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad box-decoration-break se enumeran a continuación:
- Google Chrome 22.0 y superior
- Firefox 32.0 y superior
- Edge 79 y superior
- Ópera 15.0 y superior
- Safari 7.0 y superior
- Internet Explorer no es compatible
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA