Maison > Article > interface Web > Comment utiliser la propriété CSS border-top
Comment utiliser la propriété CSS border-top
- silencementoriginal
- 2019-05-26 14:19:075838parcourir
Définition et utilisation de l'attribut border-top
En CSS, l'attribut border-top est un attribut abrégé, qui est utilisé pour placer des éléments ci-dessus Toutes les propriétés de la bordure sont définies dans une seule instruction. Lorsque nous souhaitons définir individuellement l'effet d'affichage de la bordure sur l'élément, nous pouvons utiliser l'attribut border-top en CSS pour y parvenir.
Les attributs de bordure supérieure définis par l'attribut border-top : border-top-width (largeur de la bordure supérieure), border-top-style (style de bordure supérieure), border-top-color (couleur de la bordure supérieure) .
format de syntaxe d'attribut border-top
syntaxe CSS : border-top:border-top-width border-top-style border-top-color; (Exemple : border-top:1px solid red ;)
Syntaxe JavaScript : style.borderTop="border-top-width border-top-style border-top-color";( Exemple : style.borderTop="border-top:1px solid red;")
Explication
Ce n'est pas grave si l'attribut border-top a une valeur d'attribut et n'est pas défini. Par exemple : border-top : un rouge uni est également possible. Cependant, si le style de bordure supérieure (border-top-style) n'a pas été défini auparavant, le deuxième paramètre de l'attribut border-top est également omis et l'attribut border-top n'a aucun effet. C'est-à-dire que pour définir l'effet d'affichage de la bordure, vous devez définir la bordure de l'élément (la bordure de l'élément par défaut est transparente). Si la couleur ou la largeur de la bordure transparente est définie, l'effet d'affichage ne sera pas visible.
description de la valeur de l'attribut border-top
border-top-width : Définit la largeur de la bordure supérieure
border-top-style Définit la top border Style
border-top-color définit la couleur de la bordure supérieure
inherit : hérite de la valeur de l'attribut border-top de l'élément parent.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top属性设置上边框的显示效果笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:300px;}
#a{border-top:1px solid red;}
#b{border-top:solid #FFCCCC;}
#c{border-top:5px solid;}
</style>
</head>
<body>
<div id = "a">border-top:1px solid red;</div>
<div id = "b">border-top:solid #FFCCCC;</div>
<div id = "c">border-top:5px solid;</div>
</body>
</html>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!