So verwenden Sie die CSS-Border-Top-Eigenschaft-CSS-Tutorial-php.cn

So verwenden Sie die CSS-Border-Top-Eigenschaft

silencement

Freigeben： 2019-05-27 10:48:59

Original

5944 Leute haben es durchsucht

So verwenden Sie die CSS-Border-Top-Eigenschaft

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>

Nach dem Login kopieren

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!