Bokmodel: CSS rand

De rand (border) van het element is een lijn of meerdere lijnen die om de inhoud en de marges van het element heen lopen.

De CSS border-eigenschap staat je toe om de stijl, breedte en kleur van de rand van een element te bepalen.

CSS Rand

In HTML gebruiken we tabellen om een rand rond tekst te maken, maar door CSS-border-eigenschappen te gebruiken, kunnen we uitstekende randen maken die op elk element kunnen worden toegepast.

Buiten de marges van het element is de rand van het element (border). De rand van het element is een lijn of meerdere lijnen die om de inhoud en de marges van het element heen lopen.

Elke rand heeft drie aspecten: breedte, stijl en kleur. In de volgende paragrafen zullen we deze drie aspecten in detail uitleggen.

Rand en achtergrond

De CSS-specificatie wijst erop dat de rand wordt getekend 'boven de achtergrond van het element'. Dit is belangrijk omdat sommige randen 'afgebroken' zijn (bijvoorbeeld, een stipstijlrand of een lijnstijlrand), de achtergrond van het element moet verschijnen tussen de zichtbare delen van de rand.

CSS2 wijst erop dat de achtergrond alleen tot de marges reikt, niet tot de rand. Later heeft CSS2.1 dat gecorrigeerd: de achtergrond van een element is de achtergrond van de inhoud, de marges en de randzone. De meeste browsers volgen de definitie van CSS2.1, hoewel sommige oudere browsers een andere weergave kunnen hebben.

Randstijl

Stijlen zijn de belangrijkste kant van de rand, niet omdat de stijl de weergave van de rand beheert (natuurlijk, de stijl beheert inderdaad de weergave van de rand), maar omdat zonder stijl er geen rand zou zijn.

CSS border-style eigenschapDefinieerde 10 verschillende niet-inherit stijlen, inclusief none.

Bijvoorbeeld, je kunt de rand van een afbeelding definiëren als outset, zodat het eruitziet als een 'uitsteekknop':

a:link img {border-style: outset;}

Definieer meerdere stijlen

Je kunt meerdere stijlen definiëren voor een rand, bijvoorbeeld:

p.aside {border-style: solid dotted dashed double;}

Het bovenstaande regel definieert vier randstijlen voor de paragraaf met de klasse aside: een lijnstijl boven, een stipstijl rechts, een lijnstijl onder en een lijnstijl links.

We hebben hier opnieuw gezien dat de waarden in de volgorde top-right-bottom-left zijn genomen, en deze volgorde is ook gezien bij het bespreken van het instellen van verschillende marges met meerdere waarden.

Definieer een enkele stijl

Als je de stijl van de rand van een elementkader wilt instellen voor een specifieke zijde, in plaats van de randstijl van alle 4 zijden te instellen, kun je de volgende enkele randstijl-eigenschappen gebruiken:

Daarom zijn deze twee methoden equivalent:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Let op:Als je de tweede methode wilt gebruiken, moet je de enkele eigenschappen achter de verkorte eigenschappen plaatsen. Omdat als je de enkele eigenschappen voor de border-style plaatst, de waarde van de verkorte eigenschap de waarde van de enkele waarde none overschrijft.

de breedte van de rand

Je kunt border-width eigenschapSpecificeer de breedte van de rand.

Er zijn twee manieren om de breedte van een rand te specificeren: je kunt een lengtewaarde specificeren, zoals 2px of 0.1em; of gebruik een van de drie sleutelwoorden, te weten thin, medium (standaardwaarde) en thick.

Opmerking:CSS definieert geen specifieke breedte voor de drie sleutelwoorden, dus een gebruikersagent kan thin, medium en thick respectievelijk instellen op 5px, 3px en 2px, terwijl een andere gebruikersagent respectievelijk instelt op 3px, 2px en 1px.

Daarom kunnen we de breedte van de rand op deze manier instellen:

p {border-style: solid; border-width: 5px;}

of:

p {border-style: solid; border-width: thick;}

Definieer de breedte van één zijde

Je kunt de randen van een element instellen in de volgorde top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Het bovenstaande voorbeeld kan ook bekort worden (deze schrijfwijze wordt genoemdWaarde kopiëren）：

p {border-style: solid; border-width: 15px 5px;}

Je kunt ook de breedte van elke rand van de rand instellen met behulp van de volgende eigenschappen:

Daarom zijn de onderstaande regels equivalent aan de bovenstaande voorbeelden:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Geen rand

In het vorige voorbeeld hebt je gezien dat je een border-stijl moet instellen om een soort van rand te tonen, zoals solid of outset.

Wat gebeurt er als je border-style instelt op none?

p {border-style: none; border-width: 50px;}

Hoewel de breedte van de rand 50px is, is de randstijl ingesteld op none. In dit geval verdwijnt niet alleen de stijl van de rand, maar ook de breedte wordt 0. De rand verdwijnt, waarom?

Dit komt omdat als de randstijl none is, dat wil zeggen dat de rand helemaal niet bestaat, de rand geen breedte kan hebben, dus de randbreedte wordt automatisch ingesteld op 0, ongeacht wat je oorspronkelijk hebt gedefinieerd.

Dit is erg belangrijk om te onthouden. In feite is het vergeten van het declareren van de randstijl een vaak gemaakte fout. Volgens de volgende regels hebben alle h1-elementen geen rand, laat staan 20 pixels breed:

h1 {border-width: 20px;}

Omdat de standaardwaarde van border-style none is, is het equivalent van border-style: none zonder stijl gedeclareerd.Daarom moet je een randstijl declareren als je een rand wilt laten zien.

Randkleur

Het instellen van randkleur is zeer eenvoudig. CSS gebruikt een eenvoudige border-color-eigenschaphet kan maximaal 4 kleurwaarden aan nemen.

Je kunt elk type kleurwaarde gebruiken, bijvoorbeeld een genaamd kleur, een hexadecimaal of RGB-waarde:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Als de kleurwaarde minder is dan 4, werkt het waarde-kopiëren. Bijvoorbeeld, de volgende regelverklaring stelt de boven- en onderrand van de alinea in als blauw, de linkerrand en rechterrand als rood:

p {
  border-style: solid;
  border-color: blue red;
  }

Opmerking:De standaard randkleur is de voorgrondkleur van het element zelf. Als er geen kleur is gedeclareerd voor de rand, is deze dezelfde als de tekstkleur van het element. Aan de andere kant, als het element geen tekst heeft, bijvoorbeeld een tabel die alleen beelden bevat, is de randkleur van deze tabel de tekstkleur van de ouder-element (vanwege het kunnen overnemen van color). Deze ouder-element is waarschijnlijk body, div of een andere tabel.

Definieer enkele kleuren

Er zijn ook enkele enkele randkleur-eigenschappen. Hun principes zijn hetzelfde als die van enkele stijlen en breedte-eigenschappen:

Om een solide zwarte rand aan het h1-element toe te wijzen, terwijl de rechterrand een solide rode rand is, kun je dit zo specificeren:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Transparante rand

We hebben net gezegd dat als de rand geen stijl heeft, er geen breedte is. Maar in sommige gevallen zou je een onzichtbare rand kunnen willen maken.

CSS2 introduceerde de randkleurwaarde transparent. Deze waarde wordt gebruikt om onzichtbare randen met een breedte te maken. Kijk naar het volgende voorbeeld:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

We hebben de volgende stijlen voor de bovenstaande links gedefinieerd:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Probeer het zelf uit

In een bepaalde zin is het gebruik van transparent, het instellen van randen alsof het een extra binnenmarge is; daarnaast heeft het ook het voordeel dat het zichtbaar kan worden gemaakt wanneer nodig. Deze transparante rand is vergelijkbaar met een binnenmarge, omdat de achtergrond van het element zich uitstrekt tot het gebied van de rand (indien er een zichtbare achtergrond is).

Belangrijk:Voor IE7, biedt IE/WIN geen ondersteuning voor transparent. In eerdere versies zou IE de randkleur instellen op basis van de color-waarde van het element.

CSS randvoorbeeld:

Alle rand-eigenschappen in één verklaring
Dit voorbeeld toont hoe je alle vierde rand-eigenschappen met een verkorte eigenschap in één verklaring instelt.
De stijl van de vier randen instellen
Dit voorbeeld toont hoe je de stijl van de vier randen instelt.
Verschillende randen per kant instellen
Dit voorbeeld toont hoe je verschillende randen aan de elementen instelt.
Alle randbreedte-eigenschappen in één verklaring
Dit voorbeeld toont hoe je alle randbreedte-eigenschappen met een verkorte eigenschap in één verklaring instelt.
De kleur van de vier hoeken instellen
Dit voorbeeld toont hoe je de kleur van de vier hoeken instelt. Je kunt één tot vier kleuren instellen.
Alle onderrand-eigenschappen in één verklaring
Dit voorbeeld toont hoe je alle onderrand-eigenschappen met een verkorte eigenschap in één verklaring instelt.
De kleur van de onderrand instellen
Dit voorbeeld toont hoe je de kleur van de onderrand instelt.
De stijl van de onderrand instellen
Dit voorbeeld toont hoe je de stijl van de onderrand instelt.
De breedte van de onderrand instellen
Dit voorbeeld toont hoe je de breedte van de onderrand instelt.
Alle linkerrand-eigenschappen in één verklaring
Alle linkerrand-eigenschappen in één verklaring
De kleur van de linkerrand instellen
Dit voorbeeld toont hoe je de kleur van de linkerrand instelt.
De stijl van de linkerrand instellen
Dit voorbeeld toont hoe je de stijl van de linkerrand instelt.
De breedte van de linkerrand instellen
Dit voorbeeld toont hoe je de breedte van de linkerrand instelt.
Alle rechterrand-eigenschappen in één verklaring
Dit voorbeeld toont een verkorte eigenschap die alle rechterrand-eigenschappen in één verklaring instelt.
De kleur van de rechterrand instellen
Dit voorbeeld toont hoe je de kleur van de rechterrand instelt.
De stijl van de rechterrand instellen
Dit voorbeeld toont hoe je de stijl van de rechterrand instelt.
De breedte van de rechterrand instellen
Dit voorbeeld toont hoe je de breedte van de rechterrand instelt.
Alle bovenrand-eigenschappen in één verklaring
Dit voorbeeld toont aan hoe je alle bovenrand-eigenschappen met een verkorte eigenschap instelt in één verklaring.
Instellen van de kleur van de bovenste rand
Dit voorbeeld toont hoe je de kleur van de bovenste rand instelt.
Instellen van het stijltype van de bovenste rand
Dit voorbeeld toont hoe je het stijltype van de bovenste rand instelt.
Instellen van de breedte van de bovenste rand
Dit voorbeeld toont hoe je de breedte van de bovenste rand instelt.

CSS randeigenschappen

Eigenschap Beschrijving
border Korte eigenschap, gebruikt om de eigenschappen van de vier kanten in één verklaring in te stellen.
border-style Gebruikt om de stijl van alle randen van het element in te stellen, of om afzonderlijk de randstijl van elke kant in te stellen.
border-width Korte eigenschap, gebruikt om de breedte van alle randen van het element in te stellen, of om afzonderlijk de breedte van de randen van elke kant in te stellen.
border-color Korte eigenschap, gebruikt om de kleur van de zichtbare delen van alle randen van het element in te stellen, of om aparte kleuren voor de vier kanten in te stellen.
border-bottom Korte eigenschap, gebruikt om alle eigenschappen van de onderste rand in één verklaring in te stellen.
border-bottom-color Stel de kleur van de onderste rand van het element in.
border-bottom-style Stel het stijltype van de onderste rand van het element in.
border-bottom-width Stel de breedte van de onderste rand van het element in.
border-left Korte eigenschap, gebruikt om alle eigenschappen van de linker rand in één verklaring in te stellen.
border-left-color Stel de kleur van de linker rand van het element in.
border-left-style Stel het stijltype van de linker rand van het element in.
border-left-width Stel de breedte van de linker rand van het element in.
border-right Korte eigenschap, gebruikt om alle eigenschappen van de rechter rand in één verklaring in te stellen.
border-right-color Stel de kleur van de rechter rand van het element in.
border-right-style Stel het stijltype van de rechter rand van het element in.
border-right-width Stel de breedte van de rechter rand van het element in.
border-top Korte eigenschap, gebruikt om alle eigenschappen van de bovenste rand in één verklaring in te stellen.
border-top-color Stel de kleur van de bovenste rand van het element in.
border-top-style Stel het stijltype van de bovenste rand van het element in.
border-top-width Stel de breedte van de bovenste rand van het element in.