CSS-gränser - stenografisk egendom


Innehållsförteckning

    Visa innehållsförteckning


CSS Border - Stenografi egendom

Som du såg på föregående sida finns det många egenskaper att ta hänsyn till när du hanterar gränser.

För att förkorta koden går det även att ange alla individuella gränsegenskaper i en fastighet.

Egenskapen class="w3-codespan">border är en förkortad egenskap för följande individuella kantegenskaper:

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

Exempel

p {	border: 5px solid red;
}

Resultat :

Some text

Prova själv →

<!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 också ange alla individuella kantegenskaper för bara en sida:

Vänster gräns

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

Resultat :

Some text

Prova själv →

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


Nedre kant

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

Resultat :

Some text

Prova själv →

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