rooster

CSS Reference Manual

CSS eigenschap

keuzevak

aanbevolen cursus:

CodeW3C.com tulpentas

CSS border-start-eind-rand-eigenschap

Vorige pagina border-spacing
Volgende pagina border-start-start-radius

definitie en gebruik

border-start-end-radius de eigenschap wordt gebruikt om de straal van de hoek tussen de beginpositie van het blok (block-start) en het einde van de inline-richting (inline-end) van het element te definiëren.

opmerking:gerelateerde CSS-eigenschappen writing-mode,text-orientation en direction definieert de richting van het blok en de inline-richting. Dit is de reden waarom deze eigenschappen ook invloed hebben op border-start-end-radius het resultaat van de eigenschap. Voor Engelse pagina's, de inline-richting is van links naar rechts, en de blokrichting is naar beneden.

als border-start-end-radius als een eigenschap twee waarden heeft, zal de hoek een ovaal zijn:

border-start-end-radius: 50px 100px;

als border-start-end-radius als een eigenschap een waarde heeft, zal de hoek een cirkel zijn:

border-start-end-radius: 50px;

CSS border-start-end-radius eigenschappen en border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius en border-top-right-radius Zijn zeer vergelijkbaar, maar border-start-end-radius De eigenschap is afhankelijk van de blokkenrichting en de inheemse richting.

Voorbeeld

Voorbeeld 1

Voeg hoeken toe aan het begin van de blokkenrichting en aan het einde van de inheemse richting van sommige elementen:

#example1 {
  background-color: lightblue;
  border-start-end-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-start-end-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-start-end-radius: 50%;
direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-start-end-radius: 50%;
  writing-mode: vertical-rl;
}

Probeer het zelf uit

Voorbeeld 2: Combinatie van de direction eigenschap

De positie van de hoek aan het begin van de blokkenrichting en aan het einde van de inheemse richting wordt beïnvloed door direction Invloed van de eigenschap:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-start-end-radius: 25px;
}

Probeer het zelf uit

Voorbeeld 3: Combinatie van de writing-mode eigenschap

De positie van de hoek aan het begin van de blokkenrichting en aan het einde van de inheemse richting wordt beïnvloed door writing-mode Invloed van de eigenschap:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-start-end-radius: 25px;
}

Probeer het zelf uit

CSS syntaxis

border-start-end-radius: 0|length|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
0	Standaardwaarde.
length	Definieer de vorm van de hoek aan het begin van de blokkenrichting en aan het einde van de inheemse richting. Raadpleeg:CSS Units.
%	Definieer de vorm van de hoek, uitgedrukt in procenten van de lengte van het element op de betreffende as.
initial	Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	0
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.borderStartEndRadius="50px"