CSS grænser - stenografi ejendom

Indholdsfortegnelse

CSS Border - stenografi ejendom

Som du så på den forrige side, er der mange egenskaber at overveje, når du har med grænser at gøre.

For at forkorte koden er det også muligt at angive alle de enkelte grænseegenskaber i én ejendom.

Egenskaben class="w3-codespan">border er en stenografiegenskab for følgende individuelle kantegenskaber:

class="w3-codespan">border-width
class="w3-codespan">border-style (required)
class="w3-codespan">border-color

Eksempel

p {	border: 5px solid red;
}

Resultat :

Some text

Prøv det selv →

<!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>

Du kan også angive alle de individuelle kantegenskaber for kun én side:

Venstre grænse

p {	border-left: 6px solid red;
}

Resultat :

Some text

Prøv det selv →

<!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>

Nederste kant

p {	border-bottom: 6px solid red;
}

Resultat :

Some text

Prøv det selv →

<!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>