La propiedad border-image-outset de CSS es una propiedad abreviada que se usa para especificar la distancia por la cual la imagen del borde de un elemento se coloca fuera de su cuadro.
Nota: El borde de la imagen tiene efecto en la imagen especificada por la fuente de la imagen del borde.
Sintaxis:
border-image-outset: value;
Valores de propiedad:
| Valor | Efecto |
|---|---|
| Longitud | Especifica el tamaño del borde inicial como dimensiones. |
| Número | Especifica el tamaño del borde como el múltiplo del ancho del borde correspondiente. |
| Inicial | Especifica el tamaño del borde para que sea el tamaño predeterminado. |
| Heredar | Hereda el valor de su elemento principal. |
Programa de ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.border1 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-width: 20px;
border-image-slice: 30;
border-image-outset: 10px 20px 12px 9px;
}
.border2 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-outset: 1;
border-image-slice: 30;
border-image-width: 20px;
}
.border3 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-outset: initial;
border-image-width: 20px;
}
.border4 {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(
https://media.geeksforgeeks.org/wp-content/uploads/border1-2.png);
border-image-repeat: round;
border-image-outset: inherit;
border-image-width: 20px;
}
div {
margin-top:20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>border-image-outset property</h2>
<div class = "border1">Border 1(Length)</div>
<div class = "border2">Border 2(Number)</div>
<div class = "border3">Border 3(Initial)</div>
<div class = "border4">Border 4(Inherit)</div>
</body>
</html>
Producción:
Compatibilidad con navegadores: los navegadores compatibles con la propiedad border-image-outset se enumeran a continuación:
- cromo-15.0
- Borde-12.0
- Internet Explorer-11.0
- Firefox-15.0
- Ópera-15.0
- Safari-6.0
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA