
La propiedad border-image-width en CSS define el ancho de la imagen del marco especificando su distancia desde el borde exterior del marco, y si el valor de la propiedad es border-image-width
mayor que el valor de la propiedad border-width
, la imagen del marco se extenderá más allá del relleno o del borde del contenido.
Funciones border-image-width css
Valor inicial | 1 |
---|---|
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 | Como se especifica, pero con longitudes relativas convertidas a longitudes absolutas. |
/* border-image-width: todos */ border-image-width : 3; /* border-image-width: vertical horizontal */ border-image-width : 2em 3em; /* border-image-width: superior horizontal inferior */ border-image-width : 5% 15% 10%; /* border-image-width: arriba a la derecha abajo a la izquierda */ border-image-width : 5% 2em 10% auto; /* Valores globales */ border-image-width: inherit; border-image-width: initial; border-image-width: unset;
Ejemplos y aplicaciones
Consulte la página border-image
para ver ejemplos de esta función.
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 15.0 | 15.0 | 11 | 15 | 6 |
Características generales
Esta propiedad puede tomar uno, dos, tres o cuatro valores, y el valor puede ser una longitud <length>
, un porcentaje <percentage>
o una palabra reservada auto
.
- Si se especifica un valor, se aplicará a los cuatro bordes.
- Si se especifican dos valores, se establece el ancho de los bordes vertical y horizontal (respectivamente y en orden).
- Donde si se especifican tres valores, entonces se establecen el ancho del borde superior, los bordes horizontales y el borde inferior (respectivamente y en orden).
- Si se especifican cuatro valores, se establecerá el ancho de los bordes superior, derecho, inferior e izquierdo (respectivamente y en orden).
<length> o <percentage>
Este valor representa el ancho del marco y puede ser un valor absoluto o relativo, y los valores relativos se refieren a las dimensiones del marco en relación con el ancho o alto correspondiente de la imagen. Pero este valor no puede ser negativo.
<number>
Este valor representa el número de veces que se debe multiplicar el valor de la propiedad border-width
y este valor no puede ser negativo.
auto
Este valor ajustará el ancho del marco al ancho o alto real de la imagen que se está utilizando. Si la imagen no tiene las dimensiones reales, el valor se tomará del valor calculado de la propiedad border-width
.
Estructura border-image-width css
border-image-width: [ <length-percentage> | <number> | auto ]{1,4};
dónde:
<length-percentage> = <length> | <percentage>
Vea también
- La página de propiedades establecido por la propiedad de acceso directo
border-image
:border-image-source
,border-image-slice
,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
.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS