CSS border-start-start-radius egenskap

Föregående sida border-start-end-radius
Nästa sida border-style

Definition och användning

border-start-start-radius egenskapen används för att definiera avståndet mellan elementets block-start och inline-start rundkantens radie.

Observera:relaterade CSS-egenskaper writing-mode,text-orientation och direction definierar block-direction och inline-direction. Det är därför dessa egenskaper också påverkar border-start-start-radius resultatet av egenskapen. För engelska sidor är inline-directionen från vänster till höger, och block-directionen är nedåt.

om border-start-start-radius om egenskapen har två värden kommer rundkanten att vara ellipsoid:

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

om border-start-start-radius om egenskapen har ett värde kommer rundkanten att vara cirkulär:

border-start-start-radius: 50px;

CSS border-start-start-radius egenskap och border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius och border-top-right-radius är mycket lika, men border-start-start-radius Egenskapen är beroende av blockriktningen och inre riktningen.

Exempel

Exempel 1

Lägg till rundkantar vid början av blockriktningen och inre riktningen för vissa element:

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

Prova själv

Exempel 2: Kombinera direction-egenskapen

Positionen av rundkantarna vid början av blockriktningen och inre riktningen påverkas av direction Påverkan av egenskapen:

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

Prova själv

Exempel 3: Kombinera writing-mode-egenskapen

Positionen av rundkantarna vid början av blockriktningen och inre riktningen påverkas av writing-mode Påverkan av egenskapen:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
0	Standardvärde.
length	Definiera rundkantformen vid början av blockriktningen och inre riktningen. Se:CSS units.
%	Definiera denna rundkantform genom procentandel av elementets längd på motsvarande axel.
initial	Sätt denna egenskap till dess standardvärde. Se: initial.
inherit	Får denna egenskap från sin föräldrelement. Se: inherit.

Tekniska detaljer

Standardvärde:	0
Arvbarhet:	Nej
Animeringsproduktion:	Stöd. Se:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.borderStartStartRadius="50px"