CSS border-start-start-radius egenskab

Forrige side border-start-end-radius
Næste side border-style

Definition og brug

border-start-start-radius egenskaben bruges til at definere radiusen mellem elementets blokstart (block-start) og inline-start.

Bemærk:relaterede CSS-egenskaber writing-mode,text-orientation og direction definerer blok-orientering og inline-orientering. Dette er også grunden til, at disse egenskaber også påvirker border-start-start-radius resultatet af egenskaben. For engelske sider, er den inline-orientering fra venstre til højre, og den blokorientering er nedadgående.

hvis border-start-start-radius hvis egenskaben har to værdier, vil den runde kant være ellipseformet:

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

hvis border-start-start-radius hvis egenskaben har en værdi, vil den runde kant være cirkulær:

border-start-start-radius: 50px;

CSS border-start-start-radius egenskab med border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius og border-top-right-radius er meget lignende, men border-start-start-radius Egenskaben afhænger af blokretning og indrykning.

Eksempel

Eksempel 1

Tilføj rundkant ved starten af blokretning og indrykning for nogle elementer:

#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;
}

Prøv det selv

Eksempel 2: Kombineret med direction egenskab

Rundkantpositionen ved starten af blokretning og indrykning påvirkes af direction Egenskabets indflydelse:

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

Prøv det selv

Eksempel 3: Kombineret med writing-mode egenskab

Rundkantpositionen ved starten af blokretning og indrykning påvirkes af writing-mode Egenskabets indflydelse:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
0	Standardværdi.
length	Definer rundkantformen ved starten af blokretning og indrykning. Se:CSS Enhed.
%	Definer denne rundkantform ved hjælp af en procentdel af elementets længde på den tilsvarende akse.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra forældrelementet. Se: inherit.

Tekniske detaljer

Standardværdi:	0
Arv:	Nej
Animation production:	Understøttet. Se:Animationsrelaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.borderStartStartRadius="50px"