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

高洛峰
Libérer: 2017-03-15 10:42:37
original
2841 Les gens l'ont consulté

Utilisation détaillée de

border :

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

<.> Éventuellement Valeur : pixels <p></p>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) )<p></p>2. La propriété

border-color définit la couleur de la bordure

Valeurs possibles : rouge, #f00, #ff0000, rgb( 255,0,0), transparent<p></p>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<p></p>

<p></p>
Copier après la connexion
<p></p>code css<p></p>
 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat<p></p>

css code<p></p>
 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat <p></p>

code css<p></p>
 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat<p></p>

code css<p></p>
 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat<p></p>

code css<p></p>
 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat<p></p>

code css

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}
Copier après la connexion
résultat<p></p>

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal