English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-image-La propiedad slice CSSborder-image-sourceLa imagen especificada se divide en9Un área: cuatro esquinas, cuatro lados y un centro. Se especifica4Un desplazamiento hacia adentro para lograr esto, estos desplazamientos generalmente crean una3×3la cuadrícula.
La parte central de la imagen de borde se descartará y no se utilizará por el borde en sí, perobackground-imageSi se utiliza la palabra clave fill, se utiliza como imagen de fondo.
La siguiente tabla muestra la explicación de uso y el historial de versiones de esta propiedad, así como la sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | 100% |
|---|---|
| Aplicable a: | Esta propiedad se puede aplicar a cualquier elemento, pero cuando se trata de elementos de tabla (como tr, th, td), el borde-El valor del atributo collapse es collapse cuando border-image-El atributo slice no es válido. También se aplica a::first-letter。 |
| Herencia: | No |
| Animable: | No.Ver Atributos de animación。 |
| Versión: | CSS3nueva característica |
| JavaScript syntax: | object.style.borderImageSlice="60% 60%" |
La sintaxis de este atributo es la siguiente:
border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit
Los siguientes ejemplos muestran cómo usar border-image-Atributo slice.
.box {
width: 300px;
height: 150px;
border: 15px sólido transparente;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-repeat: round;
}Prueba aquí‹/›La siguiente tabla describe los valores de este atributo.
| Valor | Descripción |
|---|---|
| number | Para las imágenes rastreadoras, representa la distancia de la imagen (en píxeles), para las imágenes vectoriales, representa las coordenadas vectoriales. |
| percentage | En relación con el tamaño de la imagen: el ancho de la imagen desplazado horizontalmente, la altura de la imagen desplazada verticalmente. |
| fill | Si existe, mantenga la parte central de la imagen; de lo contrario, considere la parte central como transparente. |
| initial | Establezca este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el border del elemento padre-image-Valor calculado del atributo slice. |
border-image-La compatibilidad del navegador del atributo slice se muestra en la siguiente tabla; los números en la tabla representan la versión mínima de los navegadores que admiten esta propiedad; todos los navegadores principales admiten esta propiedad.
|
Consulte los siguientes tutoriales:CSS3 BorderyCSS Border。
Propiedades relacionadas:border-image，border-image-source，border-image-repeat，border-image-width，border-image-outset，border。