Wie Sie auf der vorherigen Seite gesehen haben, müssen beim Umgang mit Rändern viele Eigenschaften berücksichtigt werden.
Um den Code zu verkürzen, ist es auch möglich, alle einzelnen Randeigenschaften in anzugeben eine Immobilie.
Die Eigenschaft class="w3-codespan">border
ist eine Abkürzungseigenschaft für die folgenden einzelnen Rahmeneigenschaften:
class="w3-codespan">border-width
class="w3-codespan">border-style
(required)class="w3-codespan">border-color
p { border: 5px solid red;
}
Ergebnis :
Some text
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
</body>
</html>
Sie können alle einzelnen Randeigenschaften auch nur für eine Seite festlegen:
p { border-left: 6px solid red;
}
Ergebnis :
Some text
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-left: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-left Property</h2>
<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
</body>
</html>
p { border-bottom: 6px solid red;
}
Ergebnis :
Some text
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>
<h2>The border-bottom Property</h2>
<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p>
</body>
</html>