Característica border-image en CSS

Característica border-image en CSS

La propiedad border-image en CSS permite dibujar una imagen en el marco de un elemento, lo que facilita la creación de elementos con una apariencia personalizada. La propiedad se utilizará en border-image lugar de las formas del marco que se pueden definir a través de la propiedad border-style.

Funciones border-image css

Valor inicialPara cada valor corto:
border-image-sourcenone
border-image-slice100%
border-image-width1
border-image-outset0
border-image-repeatstretch
Aplicado aTodos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece border-collapsecollapse.
HeredableNo
MóvilNo
Valor calculadoPara cada valor corto:
border-image-source: Valor none, o el URI de la imagen se convertirá en un enlace absoluto.
border-image-slice: Uno, dos, tres o cuatro valores que son longitudes absolutas o porcentajes, además de la palabra reservada fill.
border-image-width: Cómo se especifica, pero con longitudes relativas convertidas a absolutas.
border-image-outset: Como se especifica, pero con longitudes relativas convertidas a absolutas.
border-image-repeat: Como se especificó.
/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

Ejemplos y aplicaciones

Usando una foto para enmarcar. Un ejemplo del uso de una imagen de figuras rojas en las cuatro esquinas, y los bordes de otro color, y el resto de la imagen es transparente.

Código HTML:

< div  class = "bitmap-border" > La imagen se estirará para llenar el marco. </ div >

Código CSS:

.bitmap-border { 
  padding: 15px;
  border: double red 1em;
  border-image: url("border.png") 27 round stretch;
}

Usando un degradado de color. Un ejemplo de cómo utilizar un degradado de color. 

Código HTML:

< div  class = "gradient-border" > Un degradado llenará el área del marco. </ div >

Código CSS:

.gradient-border {
  padding: 20px;
  border: 20px solid;
  border-image: linear-gradient(#205a23, #28832c) 10;
}

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico151511156

Características generales

Para obtener información adicional acerca de los valores de esta propiedad acepta, ver el border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat.

Estructura

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | 
/ <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>;

Vea también

  • Propiedades de página tomadas por la propiedad de acceso directo border-image: el border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat.
  • La página de propiedades establecido por la propiedad de acceso directo borderborder-widthborder-style, y border-color.
  • Utilice una imagen como fondo de pantalla a través de la función background-image.
  • Utilice el elemento <img> para agregar imágenes a su documento.