Le contenu de cet article explique comment utiliser l'attribut border-image ? Un tutoriel détaillé sur l'attribut border-image a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Dans le didacticiel d'introduction CSS, nous avons appris le style de bordure border-style, dans lequel la bordure n'a que quelques formes simples telles que des lignes pleines, des lignes pointillées et des lignes pointillées. Et si nous voulions ajouter une belle image d’arrière-plan à la bordure ?
En CSS3, nous pouvons utiliser l'attribut border-image pour ajouter une image d'arrière-plan à la bordure.
Explication :
D'après l'analyse syntaxique, nous pouvons voir que l'utilisation de l'attribut border-image pour définir l'image d'arrière-plan de la bordure nécessite la définition de 3 paramètres :
(1) Chemin de l'image
(2) La largeur de l'image coupée (la largeur des 4 côtés, dans l'ordre, haut, droite, bas, gauche, dans le sens des aiguilles d'une montre, similaire à l'ordre des 4 côtés de la bordure attribut);
(3) Méthode de mosaïque d'images
Si nous voulons utiliser l'image suivante comme image d'arrière-plan de la bordure de l'élément (90px×90px), que devons-nous faire ? (Chaque petit carré ci-dessous mesure 30px×30px)
Exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 border-image属性</title>
<style type="text/css">
#div1
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-webkit-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
-moz-border-image:url("../App_images/lesson/run_css3/border_img1.png") 30 repeat;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
Le contenu de cet article concerne border-image Comment utiliser les attributs ? Tutoriel détaillé sur l'attribut border-image. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le rôle des modèles conceptuels
Quelle est la différence entre JD International auto-exploité et JD auto-opéré
Le rôle du mode Ne pas déranger d'Apple
Comment obtenir la longueur d'un tableau en js
Utilisation de l'annotation de vitesse
Comment configurer la redirection de nom de domaine
Comment définir la largeur du jeu de champs
Comment définir le chinois dans vscode
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
