Appliquer une image bordure-image à la bordure

Explication détaillée de l'utilisation de l'attribut border-image de CSS3 :
Avant CSS3, définir le style de la bordure était très monotone, c'est-à-dire définir le type et couleur de la bordure ou épaisseur, même si elle est soigneusement conçue, la marge d'amélioration est toujours limitée. Cependant, l'émergence de l'attribut border-image peut rendre le style de bordure de l'élément plus coloré. >1. Concept de base :
border- L'attribut image peut utiliser des images comme styles de bordure. Utilisez l'attribut border-style pour définir le type de bordure. Nous pouvons considérer border-image comme un type de bordure.
Lorsque border-image est nul ou que l'image est invisible, l'effet de bordure défini par border-style sera affiché, sinon l'effet de bordure d'image défini par border-image sera affiché.
Cet attribut peut être considéré comme l'abréviation des attributs suivants :

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

Structure grammaticale :

border-image: source slice / width / outset repeat

Ce qui précède est l'abréviation de l'attribut composé, et chaque attribut sera sera expliqué en détail plus tard.

2. Analyse des paramètres :

1. border-image-source :
Cet attribut est utilisé pour spécifier s'il faut utiliser une image pour définir le style de bordure ou le chemin source de l'image. Structure syntaxique :

border-image-source : none | <url>

La valeur par défaut de cet attribut est none, ce qui signifie qu'aucune image n'est utilisée pour définir la bordure.

Si vous utilisez une image pour définir la bordure, elle est similaire à background-image et utilise url() pour spécifier le chemin de l'image, qui peut être relatif ou absolu.

2.border-image-slice :
Cet attribut permet de préciser la position de découpe de l'image. Structure syntaxique :

border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

La valeur par défaut de cet attribut est 100 %.

S'il est en mode numérique, il s'agit d'une valeur numérique pure et ne peut pas avoir d'unité, mais elle fait spécifiquement référence aux pixels (px).

S'il s'agit du mode pourcentage, il est relatif à la taille de l'image.
Le nombre et le pourcentage peuvent avoir de 1 à 4 valeurs. La méthode de valeur est similaire à la largeur de bordure et suit également la méthode du haut, de la droite, du bas et de la gauche.
La méthode value de l'attribut border-image-slice est présentée ci-dessus. Voici une introduction à la manière dont elle coupe spécifiquement les images :


L'image ci-dessus est ce qui se produit. nous voulons utiliser comme bordure d'image. Dans l'image, la taille de chaque petit carré est de 27 pixels, alors la longueur et la largeur de cette image sont de (27*3) pixels. trancher consiste à couper et diviser l'image. La méthode de découpe consiste à couper vers l'intérieur s'il y a le code suivant :

border-image-slice:27px 27px 27px 27px

Les premiers 27 pixels sont coupés à 27 pixels vers l'intérieur à partir du bord supérieur de l'image.

Le deuxième 27px est coupé de 27px vers l'intérieur à partir du bord droit de l'image.

Le troisième 27px est coupé à 27px vers l'intérieur à partir du bord inférieur de l'image.
Le quatrième 27px est coupé de 27px vers l'intérieur à partir du bord gauche de l'image.
Les images de démonstration de découpe sont les suivantes :


Ce qui précède décrit comment découper des images, et ce qui suit décrit comment utiliser les images coupées.

Une fois l'image découpée, elle sera divisée en neuf zones. Ces neuf zones correspondront aux neuf zones de l'élément :

Le code css est le suivant. suit :

div{
  margin:0px auto;
  height:100px;
  width:100px;
  border-style:solid;
  border-width:20px;
  border-color:blue red;
}

Le code ci-dessus peut former un élément div avec une bordure. En fait, cet élément possède également neuf zones potentielles, comme indiqué ci-dessous :

Puis les neuf zones de la bordure. image Il existe une correspondance biunivoque avec les neuf zones de l'élément, c'est-à-dire que la partie correspondante de l'image de bordure est appliquée à la position correspondante de l'élément.
Si le mot-clé fill existe, la partie centrale de l'image de bordure sera conservée (la valeur par défaut est de supprimer la partie centrale et de la laisser vide).
3.border-image-width :
Cet attribut est utilisé pour spécifier la largeur de l'image de bordure.
Structure de syntaxe :

border-image-width : [ <length> | <percentage> | <number> | auto ]{1,4}

L'image de bordure est dessinée dans une zone spécifiée. Cette zone est appelée zone d'image de bordure. L'attribut border-image-width est utilisé pour spécifier "l'épaisseur" de cette zone. .
Cet attribut peut être omis, auquel cas la zone de bordure de l'image est cohérente avec la bordure de l'élément.
Cet attribut peut avoir les valeurs 1 à 4. La méthode value est similaire à border-width et suit également la méthode top, right, bottom et left.
4.border-image-outset :
Cet attribut est utilisé pour spécifier la taille de la zone de l'image de bordure au-delà de la bordure de l'élément.
Structure de syntaxe :

border-image-outset : [ <length> | <number> ]{1,4}

Cet attribut peut avoir des valeurs de 1 à 4. La méthode de valeur est similaire à border-width et suit également la méthode en haut à droite et en bas à gauche.
5.border-image-repeat :
Cet attribut est utilisé pour spécifier comment la partie médiane de l'image de bordure coupée (la partie jaune dans l'image de démonstration) existe dans la partie correspondante de l'élément.
Structure grammaticale :

border-image-repeat: [ stretch | repeat | round ]{1,2}

Expliquez d'abord la signification des trois méthodes :
étirement : l'image est étirée pour remplir la zone.
répéter : l'image est carrelée à plusieurs reprises pour remplir la zone.
rond : l'image est carrelée à plusieurs reprises pour remplir la zone. Si la zone n'est pas remplie d'un multiple d'un entier, l'image est mise à l'échelle pour s'adapter au multiple en mosaïque de l'entier.
Cet attribut peut avoir 1 à 2 valeurs d'attribut :
S'il y en a une, elle est utilisée pour les quatre directions haut, bas, gauche et droite.
S'il y en a deux, le premier est pour la direction haut et bas, et le second est pour la direction gauche et droite.
Si cet attribut est omis, stretch est utilisé par défaut.
3. Exemples de code :
Remarque spéciale : les exemples de code suivants utilisent l'image suivante comme image de bordure et la taille est de (27*3) px.

Exemple 1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dans le code ci-dessus, border-image-slice est défini sur 27, Puisque la largeur de l'image de bordure n'est pas spécifiée, la taille de la bordure sera utilisée comme standard. Et comme l'attribut border-image-repeat n'est pas spécifié, la méthode d'étirement est utilisée par défaut, qui consiste à étirer. la zone médiane coupée (c'est-à-dire la zone jaune de l'image de démonstration dans ).
Exemple 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:54px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

La seule différence entre cet exemple et l'exemple 1 est la largeur de la bordure. L'image de la bordure s'adaptera à la largeur de la bordure.
Exemple 3 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/"/>
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:200px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 stretch repeat;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dans le code ci-dessus, l'étirement est utilisé dans le sens horizontal et la répétition est utilisée dans le sens vertical. La méthode de répétition n'ajustera pas la taille de la partie centrale de l'image de bordure après la découpe (partie jaune de l'image de démonstration) pour obtenir un effet de carrelage répété, ce qui entraînera un caractère incomplet.
Exemple 4:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border:27px solid red;
  border-image:url("mytest/demo/bimg.jpg") 27 repeat round;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

La méthode ronde permet d'ajuster automatiquement la taille de la partie médiane de l'image de bordure après la découpe (la partie jaune de l'image de démonstration) pour obtenir un effet de pavage de planéité répété, il n'y aura donc pas d'incomplétude.
Exemple 5 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("mytest/demo/bimg.jpg") 27;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Le code ci-dessus modifie la taille de la bordure On voit que l'image de la bordure s'adaptera en fonction. la taille de la bordure.
Exemple 6 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://http://ask.php.cn/" />
<title>PHP中文网</title>
<style type="text/css">
div{
  height:100px;
  width:100px;
  border-style:solid;
  border-color:red;
  border-width:27px 54px;
  border-image:url("bimg.jpg") 27/27px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Lorsque l'attribut border-image-width est spécifié, l'image de bordure ne s'adaptera plus à la largeur de la bordure.