Comment définir la bordure de l'image avec CSS-tutoriel CSS-php.cn

Comment définir la bordure de l'image avec CSS

青灯夜游

Libérer： 2023-01-05 16:12:55

original

17140 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut border-image pour définir la bordure de l'image. Il vous suffit d'ajouter le style « border-image : image pathcuting width mosaïque ; » à l'élément. L'attribut border-image peut ajouter une image d'arrière-plan à la bordure pour obtenir l'effet de bordure d'image.

Comment définir la bordure de l'image avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Au stade d'introduction à CSS, nous avons appris l'attribut border-style, et nous savions également que les bordures n'ont que quelques styles simples tels que des lignes pleines et des lignes pointillées. Et si nous voulons ajouter une belle image de fond à la bordure ?

En CSS3, nous pouvons utiliser l'attribut border-image pour ajouter une image d'arrière-plan à la bordure. Les dernières versions de tous les principaux navigateurs prennent désormais en charge l'attribut border-image.

Syntaxe :

Comment définir la bordure de l'image avec CSS

Description :

l'attribut border-image doit être défini 3 aspects du contenu.

(1) Chemin de l'image.

(2) Largeur de coupe : la largeur de coupe des quatre côtés, dans l'ordre : bord supérieur, bord droit, bord inférieur et bord gauche (dans le sens des aiguilles d'une montre).

(3) Méthode de carrelage : Il existe 3 valeurs, à savoir répéter, arrondir et étirer.

Dans tous les exemples de cette section, nous utilisons l'image 90px×90px affichée dans l'image comme image d'arrière-plan de la bordure.

Comment définir la bordure de l'image avec CSS

Exemple de code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:210px;
            height:150px;
            border:30px solid gray;
            border-image:url(img/border.png) 30 repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

L'aperçu du navigateur est tel qu'indiqué ci-dessous.

Comment définir la bordure de l'image avec CSS

Analyse :

Dès l'effet de prévisualisation, on peut savoir que les nombres 1, 3, 7, 9 situés au Les 4 coins sont toujours docilement situés aux 4 coins. Ensuite, les 4 bordures 2, 4, 6 et 8 seront continuellement carrelées.

Pour l'attribut border-image, nous le résumons comme suit :

(1) Lors de la création d'une image de fond de bordure, 4 côtés doivent être créés et la partie centrale doit être évidée .

(2) La largeur de chaque côté de l'image d'arrière-plan de la bordure doit être la même que la largeur de la bordure correspondante (c'est-à-dire la largeur de la bordure).

Exemple : méthode de mosaïque

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:170px;
            height:110px;
            line-height:110px;
            text-align: center;
            border:30px solid gray;
            margin-top:20px;
        }
        /*第1个div平铺方式为：repeat*/
        #div1{border-image:url(img/border.png) 30 repeat;}
        /*第2个div平铺方式为：round*/
        #div2{border-image:url(img/border.png) 30 round;}
        /*第3个div平铺方式为：stretch*/
        #div3{border-image:url(img/border.png) 30 stretch;}
    </style>
</head>
<body>
    <div id="div1">repeat</div>
    <div id="div2">round</div>
    <div id="div3">stretch</div>
</body>
</html>

Copier après la connexion

L'effet d'aperçu du navigateur est le suivant :

Comment définir la bordure de l'image avec CSS

Analyse :

Il existe trois méthodes de mosaïque pour l'attribut border-image : répéter, arrondir et étirer.

(1) Lorsque la valeur est répétée, le petit carré à quatre côtés sera répété en continu et la partie au-delà de l'élément sera coupée.

(2) Lorsque la valeur est ronde, cela signifie que les petits carrés à 4 côtés seront couverts. L'image de bordure est compressée ou étirée pour obtenir une couverture complète.

(3) Lorsque la valeur est étirement, cela signifie que le petit carré à 4 côtés sera étiré aussi longtemps que les côtés le sont.

Les sous-attributs dérivés des attributs border-image

border-image peuvent être séparés et définir les images d'arrière-plan correspondantes pour les 4 côtés respectivement. sont les suivants indiqués dans le tableau.

border-image的派生子属性
子属性	说明
border-top-image	定义上边框背景图片
border-bottom-image	定义下边框背景图片
border-left-image	定义左边框背景图片
border-right-image	定义右边框背景图片

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!