Maison >interface Web >tutoriel CSS >Explication détaillée de l'attribut border du style CSS

Explication détaillée de l'attribut border du style CSS

高洛峰
高洛峰original
2017-03-15 10:42:372884parcourir

Utilisation détaillée de

border :

1 border-width AttributsDéfinir la largeur de la bordure

<.> Éventuellement Valeur : pixels

2, l'attribut

border-style définit le style de la bordure

Valeurs possibles : solide (ligne droite), pointillé (ligne pointillée) , pointillé (ligne pointillée) )

2. La propriété

border-color définit la couleur de la bordure

Valeurs possibles : rouge, #f00, #ff0000, rgb( 255,0,0), transparent

border-

left propriété définit la bordure gauche

border-

right propriété définit la bordure droite

border-

top Les attributs définissent la bordure supérieure

border-

bottom Les attributs définissent la bordure inférieure

Extension étendue

code html

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

code css

 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}
résultat

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}
résultat

code css

 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}
résultat

code css

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}
résultat

code css

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}
résultat

code css

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}
résultat

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