Heim > Artikel > Web-Frontend > So legen Sie die Grenzlinie von HTML-Div fest
So legen Sie die Grenzlinie von HTML-Div fest
- 青灯夜游Original
- 2021-03-09 13:52:2520103Durchsuche
HTML-Div-Element-Randlinien können mithilfe von randbezogenen Attributen festgelegt werden: 1. Das Randattribut legt gleichzeitig die Randstile oben, unten, links und rechts fest. 2. Die Randstile „Rand oben“, „Rand unten“, „Rand“ Die Attribute „left“ und „border-right“ legen den oberen, unteren, linken und rechten Rahmenstil fest.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Mit der CSS-Rahmeneigenschaft können Sie den Stil und die Farbe des Rahmens eines Elements festlegen.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 250px;
margin: 50px 0px;
padding: 20px 10px;
}
.box1{
border: 1px solid red;
}
.box2{
border-top: 1px solid green;
}
.box3{
border-bottom: 1px solid green;
}
.box4{
border-left: 1px solid green;
}
.box5{
border-right: 1px solid green;
}
</style>
</head>
<body>
<div class="box1">border属性设置使用边框样式</div>
<div class="box2">border-top属性设置上边框样式</div>
<div class="box3">border-bottom属性设置下边框样式</div>
<div class="box4">border-left属性设置左边框样式</div>
<div class="box5">border-right属性设置右边框样式</div>
</body>
</html>Rendering:
[Empfohlene Tutorials: CSS-Video-Tutorial, HTML-Video-Tutorial]
CSS-Rahmeneigenschaften
| Eigenschaften | Beschreibung |
|---|---|
| border | abgekürztes Attribut, das zum Festlegen der Attribute für vier Seiten in einer Anweisung verwendet wird. |
| border-style | wird verwendet, um den Stil aller Ränder eines Elements festzulegen oder den Rahmenstil für jede Seite einzeln festzulegen. |
| border-width | Abkürzungsattribut, mit dem die Breite aller Ränder eines Elements oder die Breite jedes Rahmens einzeln festgelegt werden kann. |
| border-color | Kurzschriftattribut, legen Sie die Farbe der sichtbaren Teile aller Ränder des Elements fest, oder legen Sie die Farbe für jede der 4 Seiten fest. |
| border-bottom | Abkürzungsattribut, mit dem alle Attribute des unteren Rands in einer Anweisung zusammengefasst werden. |
| border-bottom-color | Legt die Farbe des unteren Randes des Elements fest. |
| border-bottom-style | Legen Sie den Stil des unteren Rands des Elements fest. |
| border-bottom-width | Legen Sie die Breite des unteren Rands des Elements fest. |
| border-left | Abkürzungsattribut, mit dem alle Attribute des linken Rands in einer Anweisung zusammengefasst werden. |
| border-left-color | Legen Sie die Farbe des linken Randes des Elements fest. |
| border-left-style | Legen Sie den Stil des linken Rands des Elements fest. |
| border-left-width | Legt die Breite des linken Randes des Elements fest. |
| border-right | Abkürzungsattribut, mit dem alle Attribute des rechten Rands in einer Anweisung zusammengefasst werden. |
| border-right-color | Legt die Farbe des rechten Randes des Elements fest. |
| border-right-style | Legen Sie den Stil des rechten Rands des Elements fest. |
| border-right-width | Legen Sie die Breite des rechten Randes des Elements fest. |
| border-top | Abkürzungsattribut, mit dem alle Attribute des oberen Rands in einer Anweisung zusammengefasst werden. |
| border-top-color | Legen Sie die Farbe des oberen Randes des Elements fest. |
| border-top-style | Legen Sie den Stil des oberen Randes des Elements fest. |
| border-top-width | Legen Sie die Breite des oberen Rands des Elements fest. |
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo legen Sie die Grenzlinie von HTML-Div fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!