English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-image-l'attribut slice CSSborder-image-sourcel'image spécifiée est divisée en9une zone : quatre coins, quatre côtés et un centre. Il le fait en spécifiant4une quantité de décalage vers l'intérieur pour cela, ces décalages créent généralement une3×3du réseau.
La partie centrale de l'image de bordure sera rejetée et ne sera pas utilisée par la bordure elle-même, maisbackground-imageSi le mot-clé fill est utilisé, il est utilisé comme image de fond.
Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe d'utilisation de cette propriété dans les scripts JavaScript.
| Valeur par défaut : | 100% |
|---|---|
| S'applique à : | Cette propriété peut être appliquée à n'importe quel élément, mais lorsque les éléments de tableau (comme tr, th, td) ont une bordure-lorsque la valeur de l'attribut collapse est collapse, la bordure-image-L'attribut slice est invalide. Il est également applicable à::first-letter。 |
| Héritage : | Non |
| Animable : | Non.Voir également Attributs d'animation。 |
| Version : | CSS3nouvelle fonction |
| JavaScript syntaxe : | object.style.borderImageSlice="60% 60%" |
La syntaxe de cet attribut est la suivante :
border-image-slice: [ number | percentage ] 1 to 4 values | fill | initial | inherit
Les exemples suivants montrent comment utiliser border-image-de l'attribut slice.
.box {
width: 300px;
height: 150px;
border: 15px solid transparent;
border-image-source: url("border.png");
border-image-slice: 30;
border-image-repeat: round;
}Vérifiez ici‹/›Le tableau suivant décrit les valeurs de cette propriété.
| Valeur | Description |
|---|---|
| number | Pour les images raster, représente la distance de l'image (en pixels), pour les images vectorielles, représente les coordonnées vectorielles. |
| percentage | Par rapport à la taille de l'image : la largeur de l'image décalée horizontalement, la hauteur de l'image décalée verticalement. |
| fill | Conserver le centre de l'image si elle existe ; sinon, considérer le centre comme transparent. |
| initial | Définir cette propriété à sa valeur par défaut. |
| inherit | Si spécifié, l'élément lié utilise la bordure de son élément parent-image-Valeur calculée de l'attribut slice. |
border-image-Compatibilité des navigateurs pour l'attribut slice ; les numéros dans le tableau ci-dessous représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.
|
Veuillez consulter les tutoriels suivants :CSS3 BorderetBorder CSS。
Attributs associés :border-image，border-image-source，border-image-repeat，border-image-width，border-image-outset，border。