En el Style borderImageOutset Space que contiene el borde, la imagen que se va a pintar se denomina espacio de imagen de borde. De forma predeterminada, los límites del área de la imagen del borde coinciden con los límites del cuadro de borde del elemento. Sin embargo, estos límites se pueden ampliar mediante la propiedad border-image-outset.
La propiedad border-image-outset especifica la cantidad en la que el espacio de la imagen del borde se extiende lejos del área del cuadro del borde del elemento. Esta cantidad se describe como un conjunto de valores iniciales que especifican la cantidad en la que se expandirá el espacio de la imagen del borde desde los bordes superior, derecho, inferior e izquierdo.
Sintaxis:
- Devuelve la propiedad borderImageOutset
object.style.borderImageOutset
- Se utiliza para establecer la propiedad borderImageOutset
object.style.borderImageOutset="length | number | initial | inherit"
Valor devuelto: Devuelve la cantidad por la cual el área de la imagen del borde se extiende más allá del cuadro del borde.
Valores de propiedad
- Sintaxis:
borderImageOutset = "10px"
- Ejemplo:
html
<!DOCTYPE html><html><head><style>#GFG {width: 200px;height: 150px;margin-left: 180px;font-size: 20px;background-color: lightgrey;border: 20px solid transparent;border-image:50 50 stretch;border-image-outset: 5px;}</style></head><bodyalign="center"><buttononclick="myGeeks()">Click it</button><p>On click, border-image-outset property changes.</p><divid="GFG"><palign="center">GeeksforGeeks</p></div><script>function myGeeks() {document.getElementById("GFG").style.borderImageOutset = "10px";}</script></body></html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Sintaxis:
borderImageOutset = "5px 10px"
- Ejemplo:
html
<!DOCTYPE html><html><head><style>#GFG {width: 200px;height: 150px;margin-left: 180px;font-size: 20px;background-color: lightgrey;border: 20px solid transparent;border-image:url(50 50 stretch;border-image-outset: 5px;}</style></head><bodyalign="center"><buttononclick="myGeeks()">Click it</button><p>On click, border-image-outset property changes.</p><divid="GFG"><palign="center">GeeksforGeeks</p></div><script>function myGeeks() {document.getElementById("GFG").style.borderImageOutset = "5px 10px";}</script></body></html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Sintaxis:
borderImageOutset = "5px 7px 10px"
- Ejemplo:
html
<!DOCTYPE html><html><head><style>#GFG {width: 200px;height: 150px;margin-left: 180px;font-size: 20px;background-color: lightgrey;border: 20px solid transparent;border-image:url(50 50 stretch;border-image-outset: 5px;}</style></head><bodyalign="center"><buttononclick="myGeeks()">Click it</button><p>On click, border-image-outset property changes.</p><divid="GFG"><palign="center">GeeksforGeeks</p></div><script>function myGeeks() {document.getElementById("GFG").style.borderImageOutset = "5px 7px 10px";}</script></body></html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- Sintaxis:
borderImageOutset = "5px 7px 10px 12px"
- Ejemplo:
html
<!DOCTYPE html><html><head><style>#GFG {width: 200px;height: 150px;margin-left: 180px;font-size: 20px;background-color: lightgrey;border: 20px solid transparent;border-image:url(50 50 stretch;border-image-outset: 5px;}</style></head><bodyalign="center"><buttononclick="myGeeks()">Click it</button><p>On click, border-image-outset property changes.</p><divid="GFG"><palign="center">GeeksforGeeks</p></div><script>function myGeeks() {document.getElementById("GFG").style.borderImageOutset = "5px 7px 10px 12px";}</script></body></html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- número: Toma valor decimal. Si borderWidth es k y borderImageOutset es 2, significa que borderImage estará a 2*k de distancia del borde del elemento.
Sintaxis:
borderImageOutset = "1.2"
- Ejemplo:
html
<!DOCTYPE html><html><head><style>#GFG {width: 200px;height: 150px;margin-left: 180px;font-size: 20px;background-color: lightgrey;border: 20px solid transparent;border-image:url(50 50 stretch;border-image-outset: 5px;}</style></head><bodyalign="center"><buttononclick="myGeeks()">Click it</button><p>On click, border-image-outset property changes.</p><br><br><divid="GFG"><palign="center">GeeksforGeeks</p></div><script>function myGeeks() {document.getElementById("GFG").style.borderImageOutset = "1.2";}</script></body></html>
- Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
- heredar: cuando no se especifica ningún valor para este campo, se hereda del padre del elemento. Si no hay padre significa que este elemento es raíz, entonces toma el valor inicial (o predeterminado).
- initial: la palabra clave initial describe el valor inicial de una propiedad como su valor especificado. Lo que dice que no importa cuál sea el valor heredado o en cascada de la propiedad, se restablecerá a su valor inicial predeterminado.
Compatibilidad con navegadores: los navegadores compatibles con la propiedad DOM Style borderImageOutset se enumeran a continuación:
- Google Chrome 15.0
- Internet Explorer 11.0
- mozilla firefox 15.0
- Ópera 15.0
- Safari 6.0
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA