CSS
Grens

Syntaxis

• grens

• border: border-border border-style border-color | voorletter | erven;

• border-top: border-border border-style border-color | voorletter | erven;

• border-bottom: border-width border-style border-color | voorletter | erven;

• border-left: border-width border-style border-color | voorletter | erven;

• border-right: border-border border-style border-color | voorletter | erven;

• border-style

• border-style: 1-4 geen | verborgen | gestippeld | onderbroken | solide | dubbel | groef | nok | inzet | begin | voorletter | erven;

• border-radius

• grensradius: 1-4 lengte | % / 1-4 lengte | % | voorletter | erven;

• border-top-left-radius: lengte | % [lengte | %] | voorletter | erven;

• border-top-right-radius: lengte | % [lengte | %] | voorletter | erven;

• border-bottom-left-radius: lengte | % [lengte | %] | voorletter | erven;

• grens-rechts-onder-straal: lengte | % [lengte | %] | voorletter | erven;

• border-image

• border-image: border-image-source border-image-slice [border-image-width [border-image-outset]] border-image-repeat

• border-image-source: geen | beeld;

• border-image-slice: 1-4 aantal | percentage [vullen]

• border-image-repeat: 1-2 stretch | herhaal | ronde | ruimte

• border-collapse

• border-collapse: scheiden | instorten | voorletter | erven

Opmerkingen

border-radius

Met de eigenschap border-radius kunt u de vorm van het basismodel wijzigen.

Elke hoek van een element kan maximaal twee waarden hebben, voor de verticale en horizontale straal van die hoek (voor maximaal 8 waarden).

De eerste reeks waarden definieert de horizontale straal. De optionele tweede reeks waarden, voorafgegaan door een '/', definieert de verticale straal. Als slechts één set waarden wordt opgegeven, wordt deze gebruikt voor zowel de verticale als de horizontale straal.

border-radius: 10px 5% / 20px 25em 30px 35em;

De 10 10px is de horizontale straal van linksboven en rechtsonder. En de 5% is de horizontale straal van rechtsboven en linksonder. De andere vier waarden na '/' zijn de verticale stralen voor linksboven, rechtsboven, rechtsonder en linksonder.

Zoals met veel CSS-eigenschappen, kunnen steno worden gebruikt voor elke of alle mogelijke waarden. U kunt daarom alles opgeven van één tot acht waarden. Met de volgende steno kunt u de horizontale en verticale straal van elke hoek op dezelfde waarde instellen:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Border-radius wordt meestal gebruikt om box-elementen om te zetten in cirkels. Door de randradius in te stellen op de helft van de lengte van een vierkant element, wordt een cirkelvormig element gemaakt:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Omdat de grensradius percentages accepteert, is het gebruikelijk om 50% te gebruiken om te voorkomen dat de grensradiuswaarde handmatig wordt berekend:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Als de breedte- en hoogte-eigenschappen niet gelijk zijn, is de resulterende vorm eerder een ovaal dan een cirkel.

Browser specifiek randradius voorbeeld:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

border-style

De eigenschap border-style bepaalt de stijl van de rand van een element. Deze eigenschap kan één tot vier waarden hebben (voor elke zijde van het element één waarde.)

Voorbeelden:

border-style: dotted;

border-style: dotted solid double dashed;

border-style kan ook de waarden none en hidden . Ze hebben hetzelfde effect, behalve hidden werken voor het oplossen van grensconflicten voor <table> elementen. In een <table> met meerdere randen heeft none enkele de laagste prioriteit (wat betekent in een conflict, de rand wordt weergegeven) en hidden heeft de hoogste prioriteit (wat betekent dat in een conflict de rand niet wordt weergegeven).

border (steno)

In de meeste gevallen wilt u verschillende randeigenschappen ( border-width , border-style en border-color ) definiëren voor alle zijden van een element.

In plaats van te schrijven:

border-width: 1px;
border-style: solid;
border-color: #000;

U kunt eenvoudig schrijven:

border: 1px solid #000;

Deze afkortingen zijn ook beschikbaar voor elke zijde van een element: border-top , border-left , border-right en border-bottom . Dus je kunt doen:

border-top: 2px double #aaaaaa;

border-image

Met de eigenschap border-image hebt u de mogelijkheid om een afbeelding in te stellen die moet worden gebruikt in plaats van normale randstijlen.

A border-image in hoofdzaak bestaan uit een

• border-image-source : het pad naar de te gebruiken afbeelding
• border-image-slice : geeft de offset aan die wordt gebruikt om de afbeelding in negen gebieden te verdelen (vier hoeken , vier randen en een midden )
• border-image-repeat : geeft aan hoe de afbeeldingen voor de zijkanten en het midden van de randafbeelding worden geschaald

Beschouw het volgende voorbeeld waarbij border.png een afbeelding is van 90x90 pixels:

border-image: url("border.png") 30 stretch;

De afbeelding wordt opgesplitst in negen gebieden met 30x30 pixels. De randen worden gebruikt als de hoeken van de rand, terwijl de zijkant ertussenin wordt gebruikt. Als het element hoger / breder is dan 30 px, wordt dit deel van de afbeelding uitgerekt . Het middelste deel van de afbeelding is standaard transparant.

grens- [left | right | boven | bottom]

De eigenschap border-[left|right|top|bottom] wordt gebruikt om een rand toe te voegen aan een specifieke zijde van een element.

Als u bijvoorbeeld een rand aan de linkerkant van een element wilt toevoegen, kunt u het volgende doen:

#element {
    border-left: 1px solid black;
}

border-collapse

De border-collapse eigenschap is alleen van toepassing op table (en elementen die worden weergegeven als display: table of inline-table ) en stelt in of de tabelranden worden samengevouwen in een enkele border of losgemaakt zoals in standaard HTML.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Zie ook tabellen - documentinvoer bij border-collapse

Meerdere randen

Met behulp van overzicht:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Box-schaduw gebruiken:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Een pseudo-element gebruiken:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Een meerkleurige rand maken met een randafbeelding

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

Het bovenstaande voorbeeld zou een rand produceren die uit 5 verschillende kleuren bestaat. De kleuren worden gedefinieerd door een linear-gradient (meer informatie over verlopen vindt u in de documenten ). U kunt meer informatie vinden over de eigenschap border-image-slice in het voorbeeld van de border-image op dezelfde pagina.

( Opmerking: er zijn extra eigenschappen aan het element toegevoegd voor presentatiedoeleinden. )

Je hebt gemerkt dat de linkerrand slechts één kleur heeft (de startkleur van het verloop), terwijl de rechterrand ook maar één kleur heeft (de eindkleur van het verloop). Dit komt door de manier waarop de eigenschap border image werkt. Het is alsof het verloop wordt toegepast op het hele vak en vervolgens worden de kleuren gemaskeerd vanuit de opvulling en inhoudsgebieden, waardoor het lijkt alsof alleen de rand het verloop heeft.

Welke rand (en) een enkele kleur hebben, is afhankelijk van de gradiëntdefinitie. Als het verloop een to right verloop is, is de linkerrand de startkleur van het verloop en is de rechterrand de eindkleur. Als het een verloop to bottom , zou de bovenste rand de startkleur van het verloop zijn en de onderste rand de eindkleur. Hieronder staat de uitvoer van een 5-gradiënt to bottom .

Als de rand alleen aan specifieke zijden van het element is vereist, kan de eigenschap border-width net als bij elke andere normale rand worden gebruikt. Als u de onderstaande code toevoegt, wordt bijvoorbeeld alleen een rand boven aan het element geproduceerd.

border-width: 5px 0px 0px 0px;

Merk op dat elk element dat de eigenschap border-image heeft , de border-radius niet respecteert (dat wil zeggen de border zal niet krommen). Dit is gebaseerd op de onderstaande verklaring in de specificatie:

De achtergronden van een vak, maar niet de randafbeelding, worden geknipt in de juiste curve (zoals bepaald door 'achtergrondclip').