Comment utiliser l'attribut border-image ? Explication détaillée du didacticiel sur les propriétés border-image-tutoriel CSS-php.cn

Comment utiliser l'attribut border-image ? Explication détaillée du didacticiel sur les propriétés border-image

云罗郡主

Libérer： 2018-10-23 16:06:49

avant

4043 Les gens l'ont consulté

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>

Copier après la connexion

Comment utiliser lattribut border-image ? Explication détaillée du didacticiel sur les propriétés border-image

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!