La propiedad borderImage del estilo DOM en HTML es una propiedad abreviada que se utiliza para establecer las propiedades borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset y borderImageRepeat.
Sintaxis:
- Se utiliza para devolver la propiedad borderImage.
object.style.borderImage
- Se utiliza para establecer la propiedad borderImage.
object.style.borderImage = "source slice width outset repeat| initial|inherit"
Valores de propiedad: en la propiedad borderImage hay 7 valores de propiedad que se mencionan anteriormente y se describen a continuación:
- border-Image-Source: este parámetro contiene la imagen de origen que se utilizará.
- border-Image-Slice: este parámetro especifica los desplazamientos internos del borde de la imagen.
- border-Image-Width: este parámetro contiene el ancho del borde de la imagen utilizada.
- border-Image-Outset: este parámetro define cuál del área del borde debe extenderse.
- border-Image-Repeat: este parámetro define que el borde debe repetirse, redondearse o estirarse.
- initial: este valor de propiedad se utiliza para establecer esta propiedad en su valor predeterminado.
- heredar: este valor de propiedad se utiliza para heredar esta propiedad de su elemento principal.
Valores de retorno:
Devuelve un valor de string que representa la propiedad de imagen de borde de un elemento.
Ejemplos-1: Esto muestra cómo cambiar la imagen del borde.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#my {
border: 50px solid transparent;
width: 250px;
padding: 15px 15px;
<!-- Safari 5 -->
-webkit-border-image:
url(https://media.geeksforgeeks.org/wp-content/uploads/bord-1-300x161.jpg)
100 100 stretch;
<!-- Opera 12 -->
-o-border-image:
url(https://media.geeksforgeeks.org/wp-content/uploads/bord-1-300x161.jpg)
100 100 stretch;
border-image:
url(https://media.geeksforgeeks.org/wp-content/uploads/bord-1-300x161.jpg)
100 100 stretch;
}
</style>
</head>
<body>
<h3>Click the "Change" button to change the border-image property</h3>
<button onclick="myFunction()">Change</button>
<div id="my">
<h1><font color="green">GeeksForGeeks</font></h1>
</div>
<script>
function myFunction() {
<!-- Code for Safari 5 -->
document.getElementById("my").style.WebkitBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bord1-1-300x162.jpg)30 30 round";
<!-- Code for Opera 12 -->
document.getElementById("my").style.OBorderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bord1-1-300x162.jpg)30 30 round";
document.getElementById("my").style.borderImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bord1-1-300x162.jpg)30 30 round";
}
</script>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón: «El borde de la imagen ha cambiado»
Ejemplos-2: Propiedad borderImageSource de estilo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 30px solid transparent;
border-image:
url(https://media.geeksforgeeks.org/wp-content/uploads/bord1-1-300x162.jpg);
border-image-slice: 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat: round;
}
</style>
</head>
<body>
<h3>Here are the two images used:</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/bord-1-300x161.jpg"
height="100" width="100">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/bord1-1-300x162.jpg"
height="100" width="100">
<div id="main">
<h1><center><font color="green" >
GeeksForGeeks
</font></center></h1>
</div>
<h3>Click the "Change" button to change the value of the borderImageSource property.</h3>
<button onclick="myFunction()">Change</button>
<script>
function myFunction() {
document.getElementById("main").style.borderImageSource =
"url(https://media.geeksforgeeks.org/wp-content/uploads/bord-1-300x161.jpg)";
}
</script>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con DOM Style borderImage Property se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA