From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/border-image/index.html | 199 +++++++++++++++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 files/es/web/css/border-image/index.html (limited to 'files/es/web/css/border-image/index.html') diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html new file mode 100644 index 0000000000..a2f2ca8c26 --- /dev/null +++ b/files/es/web/css/border-image/index.html @@ -0,0 +1,199 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +
{{CSSRef("CSS Borders")}}
+ +

Resumen

+ +

La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

+ +

La propiedad border-image es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Etiquetado formal: {{csssyntax("border-image")}}
+ +

Valores

+ +

A continuación vea las respectivas propiedades para los diferentes valores.

+ +

Ejemplos

+ +

Bitmap repeated (repeat)

+ +

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+
+ +

Resultado:
+ border image repeat demo

+ +

Bitmap repeated (round)

+ +

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}
+ +

Resultado:
+ border image round demo

+ +

Bitmap stretched

+ +

La opción 'stretch' estira la imágen para rellenar todo el borde del área

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+ +

Resultado:
+ border image stretch demo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support +

{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}} [1]

+ +

Without prefix since {{CompatGeckoDesktop("15")}}

+ 		+

7.0{{property_prefix("-webkit")}}

+ +

Without prefix since 16.0

+ 		+

11

+ 		+

10.5 / 11.0{{property_prefix("-o")}} [2]

+ +

Without prefix since 15.0

+ 		+

3.0{{property_prefix("-webkit")}}

+ +

Without prefix since 6.0

+
optional <border-image-slice>{{CompatGeckoDesktop("15")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoDesktop("15")}}Yes{{CompatUnknown}}{{CompatNo}}Yes (6)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support +

3.2{{property_prefix("-webkit")}}

+ +

Without prefix since {{CompatGeckoMobile("15")}}

+ 		{{CompatNo}}11.0{{property_prefix("-o")}}2.1{{property_prefix("-webkit")}}
optional <border-image-slice>{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatNo}}Yes(18)
+
+ + -- cgit v1.2.3-54-g00ecf