Comment utiliser la propriété CSS border-top-tutoriel CSS-php.cn

Comment utiliser la propriété CSS border-top

silencement

Libérer： 2019-05-27 10:48:59

original

5921 Les gens l'ont consulté

Comment utiliser la propriété CSS border-top

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>

Copier après la connexion

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!