CSS border-start-start-radius ominaisuus

Edellinen sivu border-start-end-radius
Seuraava sivu border-style

Määrittely ja käyttö

border-start-start-radius ominaisuus määrittää elementin lohkon alkupisteen (block-start) ja rivin alkupisteen (inline-start) välisen nurkkanopeuden.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode,text-orientation ja direction määrittää lohkon suunnan ja rivin suunnan. Tämä on myös syy, miksi nämä ominaisuudet vaikuttavat border-start-start-radius ominaisuuksien tulosta. Englanninkielisillä sivuilla, rivin suunta on vasemmalta oikealle, ja lohkon suunta on alas.

Jos border-start-start-radius ominaisuudella on kaksi arvoa, niin nurkka on ellipsi:

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

Jos border-start-start-radius ominaisudella arvo, niin nurkka on ympyrä:

border-start-start-radius: 50px;

CSS border-start-start-radius ominaisuus ja reunavarsiokulma-vasen-alha,border-bottom-right-radius,border-top-left-radius ja border-top-right-radius on erittäin samanlainen, mutta border-start-start-radius Ominaisuus riippuu blokin ja rivin suunnasta.

Esimerkki

Esimerkki 1

Lisää pyöräntausta blokin alkupisteeseen ja rivin alkupisteeseen tiettyjen elementtien kohdalla:

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

Kokeile itse

Esimerkki 2: Yhdistettynä direction ominaisuuteen

Blokin alkupisteen ja rivin alkupisteen pyöräntaustan sijainti riippuu direction Ominaisuuden vaikutus:

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

Kokeile itse

Esimerkki 3: Yhdistettynä writing-mode ominaisuuteen

Blokin alkupisteen ja rivin alkupisteen pyöräntaustan sijainti riippuu writing-mode Ominaisuuden vaikutus:

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

Kokeile itse

CSS kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
0	Oletusarvo.
length	Määritä blokin alkupisteen ja rivin alkupisteen pyöräntaustan muoto. Katso:CSS yksiköt.
%	Määritä tähän pyöräntaustan muoto elementin pituuden prosenttina vastaavalla akselilla.
initial	Aseta tämä ominaisuus sen oletusarvon arvoksi. Katso: initial.
inherit	Periisi vanhemmalta elementiltä tämän ominaisuuden. Katso: inherit.