Heim > Artikel > Web-Frontend > So verwenden Sie die CSS-Border-Top-Eigenschaft
So verwenden Sie die CSS-Border-Top-Eigenschaft
- silencementOriginal
- 2019-05-26 14:19:075901Durchsuche
Definition und Verwendung des Border-Top-Attributs
In CSS ist das Border-Top-Attribut ein Kurzattribut, das zum Platzieren von Elementen verwendet wird oben Alle Eigenschaften des Rahmens werden in einer Anweisung definiert. Wenn wir den Anzeigeeffekt des Rahmens für das Element individuell festlegen möchten, können wir dies mit dem Attribut „border-top“ in CSS erreichen.
Die durch das border-top-Attribut definierten oberen Randattribute: border-top-width (obere Randbreite), border-top-style (oberer Randstil), border-top-color (obere Randfarbe) .
Border-Top-Attribut-Syntaxformat
CSS-Syntax: Border-Top:Border-Top-Width Border-Top-Style border-top-color; (Beispiel: border-top:1px einfarbig rot;)
JavaScript-Syntax: style.borderTop="border-top-width border-top-style border-top-color";( Beispiel: style.borderTop="border-top:1px solid red;")
Erklärung
Es ist in Ordnung, wenn das Attribut „border-top“ einen Attributwert hat und ist nicht gesetzt. Zum Beispiel: border-top: solid red ist ebenfalls möglich. Wenn der obere Rahmenstil (border-top-style) jedoch noch nicht festgelegt wurde, wird auch der zweite Parameter des Attributs „border-top“ weggelassen und das Attribut „border-top“ hat keine Auswirkung. Das heißt, um den Anzeigeeffekt des Rahmens festzulegen, müssen Sie den Elementrahmen definieren (der Standardelementrahmen ist transparent. Wenn Sie die Farbe oder Breite eines transparenten Rahmens festlegen, wird der Anzeigeeffekt nicht angezeigt).
border-top-Attributwertbeschreibung
border-top-width: Legen Sie die Breite des oberen Randes fest.
border-top-style Legen Sie fest Stil des oberen Rands
border-top-color legt die Farbe des oberen Rands fest
inherit: erbt den Attributwert „border-top“ vom übergeordneten Element.
Instanz
<!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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Border-Top-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!