La propiedad borderImageSlice se utiliza para especificar los desplazamientos internos del borde de la imagen . El usuario puede especificar el valor de esta propiedad en términos de porcentaje , número o valores globales .
Sintaxis:
object.style.borderImageSlice = "number|%|fill|initial|inherit"
Valores devueltos: Devuelve un valor de string, que representa la propiedad border-image-slice de un elemento
Valores de propiedad:
- número
- %
- llenar
- inicial
- heredar
1. número: la propiedad borderImageSlice puede tomar el número como el valor donde este número representa los píxeles en la imagen o las coordenadas vectoriales (si la imagen es una imagen vectorial).
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
border: 30px solid transparent;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png');
border-image-slice: 40;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<center>
<div id="main">
<p>
GeeksforGeeks :
A computer science portal for geeks.
</p>
</div>
<p style="color:green;">Click below</p>
<button onclick="myFunction()">Change</button>
</center>
<script>
function myFunction() {
document.getElementById(
"main").style.borderImageSlice = "30";
}
</script>
</body>
</html>
Producción:
- Antes del clic:
- Después del clic:
2. porcentaje(%): Los porcentajes son relativos al tamaño de la imagen cuyo valor por defecto es 100%.
Ejemplo-2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
border: 30px solid transparent;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png');
border-image-slice: 40;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<center>
<div id="main">
<p>
GeeksforGeeks :
A computer science portal for geeks.
</p>
</div>
<p style="color:green;">Click below</p>
<button onclick="myFunction()">Change</button>
</center>
<script>
function myFunction() {
document.getElementById(
"main").style.borderImageSlice = "30% 30%";
}
</script>
</body>
</html>
Producción:
- Antes del clic:
- Después del clic:
3. relleno: Hace que se conserve la parte media del borde.
Ejemplo-3:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
border: 30px solid transparent;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png');
border-image-slice: 40;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<center>
<div id="main">
<p>
GeeksforGeeks :
A computer science portal for geeks.
</p>
</div>
<p style="color:green;">Click below</p>
<button onclick="myFunction()">Change</button>
</center>
<script>
function myFunction() {
document.getElementById(
"main").style.borderImageSlice = "fill";
}
</script>
</body>
</html>
Producción:
- Antes del clic:
- Después del clic:
4. initial: establezca la propiedad en su valor predeterminado. Aquí el valor predeterminado es 100%.
Ejemplo-4:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
border: 30px solid transparent;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png');
border-image-slice: 40;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<center>
<div id="main">
<p>
GeeksforGeeks :
A computer science portal for geeks.
</p>
</div>
<p style="color:green;">Click below</p>
<button onclick="myFunction()">Change</button>
</center>
<script>
function myFunction() {
document.getElementById(
"main").style.borderImageSlice = "initial";
}
</script>
</body>
</html>
Producción:
- Antes del clic:
- Después del clic:
5. heredar: hereda esta propiedad de su elemento principal.
Ejemplo-5:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
border: 30px solid transparent;
border-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/border-3.png');
border-image-slice: 40;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<center>
<div id="main">
<p>
GeeksforGeeks :
A computer science portal for geeks.
</p>
</div>
<p style="color:green;">Click below</p>
<button onclick="myFunction()">Change</button>
</center>
<script>
function myFunction() {
document.getElementById(
"main").style.borderImageSlice = "inherit";
}
</script>
</body>
</html>
Producción:
- Antes del clic:
- Después del clic:
Navegadores compatibles: el navegador compatible con la propiedad DOM Style borderImageSlice que se enumera a continuación:
- Google Chrome 15 y superior
- Borde 12 y superior
- Mozilla Firefox 15 y superior
- Ópera 15 y superior
- Safari 6 y superior
- Internet Explorer 11 y superior
Publicación traducida automáticamente
Artículo escrito por piyushpilaniya98 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA