Maison  >  Article  >  interface Web  >  Explication détaillée de l'utilisation de la bordure inférieure du CSS

Explication détaillée de l'utilisation de la bordure inférieure du CSS

巴扎黑
巴扎黑original
2017-06-28 14:12:027804parcourir

border-bottom (précisez le style, la largeur et la couleur de la ligne du bas)


border-bottom: value; 🎜> border-bottom-style: valeur;

border-bottom-color: valeur;

border-bottom-

largeur

: valeur; tels que :

border-bottom: solid 1px #ffff00;

border-bottom-style: outset;

border-bottom-color: #0000ff;

border-bottom-width:15px;

border-bottom

attribut

est utilisé pour spécifier le style, la largeur et la couleur de la bordure inférieure. Les valeurs sont séparées par moitié. -largeur des espaces et il n'y a pas d'ordre. Concernant la valeur du style de l'attribut border-bottom, veuillez vous référer au style du bord pour plus de détails. La valeur de la largeur du bord. Pour plus de détails, veuillez vous référer à la largeur du bord.

Utilisez les attributs suivants lorsque vous spécifiez respectivement le style, la largeur et la couleur de la bordure inférieure :

  • border-bottom-color : La couleur du bordure inférieure

  • border-bottom-style : le style de la ligne du bas

  • border-bottom-width : bottom La largeur de la bordure

    Attribut
    Exemple

    fichier CSS

    .sample1,.sample2,.sample3{
    
    margin:0.5em;
    
    padding:2px;
    
    }
    
    .sample1 {border-bottom: solid 1px #ffff00;}
    
    .sample2 {border-bottom: groove 10px #00ff00;}
    
    .sample3 {border-bottom-style: ridge;
    
    border-bottom-color: #0000ff;
    
    border-bottom-width:15px;
    
    }


    Fichier HTML lié au fichier CSS ci-dessus

    <!DOCTYPE html>
    
    <html lang="zh">
    
    <head>
    
    <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="material/border-bottom.css" rel="stylesheet" type="text/css" />
    
    <title>border-bottom属性(http://wwww.manongjc.com)</title>
    
    </head>
    
    <body>
    
    <p class="sample1">sample1:下边线 solid 1px #ffff00</p>
    
    <p class="sample2">sample2:下边线 groove 10px #00ff00</p>
    
    <p class="sample3">sample3:分别指定下边线的样式、宽度、颜色 </p>
    
    </body>
    
    </html>
    La valeur de border-bottom et sa description
    Valeur Description
    bordure inférieure solide Le la ligne du bas est une ligne continueAutres valeurs Il existe également : rainure, pointillé, etc. Veuillez vous référer au style de bord pour plus de détails.
    1px
    border-bottom的值及其说明
    属性 说明
    border-bottom solid 下边线为实线
    其他的值还有:groove、dotted等,详细请参照边线样式。
    1px 下边线的宽度
    使用数值可以表示边线的任意宽度,数值单位除了px,还有em、ex,详细请参照数值+单位
    使用关键词指定
    thin(细)、medium(普通)、thick(粗)
    #ff0000 下边线的颜色
    除了使用颜色代码表示具体颜色之外,边线还可以指定为透明即:transparent
    La largeur de la ligne du bas

    Les valeurs numériques peuvent être utilisées pour représenter n'importe quelle largeur du bord. En plus des px, les unités numériques incluent également em et ex. Pour plus de détails, veuillez vous référer à Numérique + Unité

    Utilisez des mots-clés pour spécifier

    . fin (fin), moyen (normal), épais (épais)

    #ff0000 La couleur de la ligne inférieure

    En plus d'utiliser des codes de couleur pour représenter des couleurs spécifiques, les bords peuvent également être spécifiés comme transparents : transparent

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn