In CSS wird die Eigenschaft „border“ verwendet, um einen Rahmen auf jedes HTML-Element anzuwenden, beispielsweise auf ein div. Darüber hinaus können wir auch verschiedene Ränder, Farben, Breiten und andere Stile festlegen.
In diesem Tutorial lernen wir verschiedene Möglichkeiten kennen, die Rahmenbreite eines Elements festzulegen. Darüber hinaus lernen wir, die Breite verschiedener Seiten eines Elements festzulegen.
Mit der CSS-Eigenschaft „border-width“ wird die Breite des Rahmens definiert. Benutzer können die Breite verschiedener Seiten über diese vier Werte festlegen. Die letzten drei Werte sind jedoch eine Option.
Wenn Sie einen einzelnen Wert als Rahmenbreite verwenden, wird auf allen vier Seiten die gleiche Rahmenbreite angewendet. Wenn wir zwei Werte übergeben, wird der erste Wert als obere und untere Randbreite und der zweite Wert als linke und rechte Randbreite behandelt.
Benutzer können die CSS-Eigenschaft „border-width“ verwenden, um die Breite des Rahmens gemäß der folgenden Syntax festzulegen.
border-width: top right bottom left; border-width: top-bottom right-left; border-width: top-bottom-right-left;
In der obigen Syntax definieren wir zunächst unterschiedliche Breiten für alle Seiten. Danach definieren wir unterschiedliche Breiten für oben, unten sowie links und rechts und legen dann für alle Seiten die gleiche Randbreite fest.
Im folgenden Beispiel haben wir ein div-Element erstellt und eine „5px“-Rahmenbreite für das Rahmenelement festgelegt. In der Ausgabe kann der Benutzer einen gestrichelten roten Rand erkennen.
<html>
<style>
div {
border-style: dashed;
border-width: 5px;
border-color: red;
width: 600px;
height: 100px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet. </h3>
<div>
Welcome to the world of CSS.
</div>
</body>
</html>
Im folgenden Beispiel verwenden wir die CSS-Eigenschaft „border-width“, um unterschiedliche Rahmenbreiten für alle vier Seiten des Elements festzulegen. Wir legen eine Breite von „5 Pixel“ für den oberen Rand, eine Breite von „10 Pixel“ für den rechten Rand, eine Breite von „15 Pixel“ für den unteren Rand und eine Breite von „20 Pixel“ für den linken Rand fest
In der Ausgabe kann der Benutzer die unterschiedlichen Rahmenbreiten auf jeder Seite des div-Elements beobachten.
<html>
<style>
div {
border-style: solid;
border-width: 5px 10px 15px 20px;
border-color: red;
width: 600px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border-width CSS property </i> to set the border width of the elemenet </h3>
<div>
<p> top border - 5px; </p>
<p> right border - 10px; </p>
<p> bottom border - 15px; </p>
<p> left border - 20px; </p>
</div>
</body>
</html>
Die CSS-Eigenschaft „border“ nimmt drei Werte an. Der erste Wert gibt die Rahmenbreite an, der zweite Wert gibt den Rahmenstil an und der dritte Wert gibt die Rahmenfarbe an.
Hier konzentrieren wir uns auf den ersten Wert, der die Rahmenbreite festlegt.
Benutzer können die Rahmenbreite mithilfe der CSS-Eigenschaft „border“ gemäß der folgenden Syntax festlegen.
border: 1rem solid blue;
Im folgenden Beispiel legt der Wert „1rem Solid blue“ der CSS-Eigenschaft „border“ einen Rahmen mit 1rem Breite, Rot und Volltonfarbenstilen fest. Um die Rahmenbreite zu ändern, müssen wir den ersten Wert ändern.
<html>
<style>
div {
border: 1rem solid blue;
width: 500px;
height: 200px;
padding: 10px;
}
</style>
<body>
<h3> Using the <i> border CSS property </i> to set the border width of the elemenet </h3>
<div>
You are on the TutorialsPoint website!
</div>
</body>
</html>
In CSS können wir die Rahmenbreite auch mit den Werten „dünn“, „mittel“ und „dick“ festlegen. Der Wert „dünn“ legt einen dünnen Rand fest, der Wert „mittel“ legt eine breitere Randbreite als der „dünne“ Rand fest und der Wert „dick“ legt eine breitere Breite als „mittel“ fest.
Im folgenden Beispiel haben wir drei div-Elemente genommen und mithilfe der CSS-Eigenschaft „border“ unterschiedliche Rahmenbreiten angegeben, die der Benutzer in der Ausgabe beobachten kann.
<html>
<style>
p {
width: 200px;
height: 100px;
margin: 10px;
}
.first {
border: thin solid black;
}
.second {
border: medium solid black;
}
.third {
border: thick solid black;
}
</style>
<body>
<h3> Use the <i> border CSS property </i> to set the border width of the HTML element </h3>
<p class="first"> Thin border </p>
<p class="second"> Medium border </p>
<p class="third"> Thick border </p>
</body>
</html>
Mit der CSS-Eigenschaft „border-top-width“ kann der Benutzer die Breite des oberen Rands festlegen. Darüber hinaus können Benutzer die CSS-Eigenschaften „border-right-width“, „border-bottom-width“ und „borderleft-width“ verwenden, um die Breite des rechten Randes, des unteren Randes bzw. des linken Randes des Elements festzulegen.
Benutzer können verschiedene CSS-Eigenschaften verwenden, um die Rahmenbreite verschiedener Seiten gemäß der folgenden Syntax festzulegen.
border-top-width: 3px; border-right-width: 6px; border-bottom-width: 9px; border-left-width: 12px;
Im folgenden Beispiel haben wir vier verschiedene div-Elemente erstellt. Wir legen die obere Randbreite für das erste div-Element, die rechte Randbreite für das zweite div-Element und die untere und linke Randbreite für das dritte und vierte Element fest.
<html>
<style>
div {
width: 500px;
height: 100px;
margin: 10px;
}
.one {
border-top-width: 3px;
border-style: dotted;
border-color: red;
}
.two {
border-right-width: 6px;
border-style: solid;
border-color: green;
}
.three {
border-bottom-width: 9px;
border-style: dashed;
border-color: blue;
}
.four {
border-left-width: 12px;
border-style: double;
border-color: yellow;
}
</style>
<body>
<h2> Set the border width for the different sides of the element</h2>
<div class="one"> First div </div>
<div class="two"> Second div </div>
<div class="three"> Third div </div>
<div class="four"> Fourth div </div>
</body>
</html>
Benutzer haben gelernt, verschiedene CSS-Eigenschaften zu verwenden, um die Rahmenbreite von HTML-Elementen festzulegen. Wir haben gelernt, die CSS-Eigenschaften „border-width“ und „border“ zu verwenden, um die Breite des Rahmens festzulegen. Darüber hinaus haben wir gelernt, unterschiedliche Rahmenbreiten für verschiedene Seiten des Elements festzulegen.
Das obige ist der detaillierte Inhalt vonWelche Eigenschaft in CSS gibt die Breite eines Rahmens an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
