
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 inicial | Para cada valor corto: border-image-source : none border-image-slice : 100% border-image-width : 1 border-image-outset : 0 border-image-repeat : stretch |
---|---|
Aplicado a | Todos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece border-collapse a collapse . |
Heredable | No |
Móvil | No |
Valor calculado | Para 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ística | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 15 | 15 | 11 | 15 | 6 |
Características generales
Para obtener información adicional acerca de los valores de esta propiedad acepta, ver el border-image-source
, border-image-slice
, border-image-width
, border-image-outset
y border-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
: elborder-image-source
,border-image-slice
,border-image-width
,border-image-outset
yborder-image-repeat
. - La página de propiedades establecido por la propiedad de acceso directo
border
:border-width
,border-style
, yborder-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.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS