CSS border-start-end-radius ominaisuus

Edellinen sivu border-spacing
Seuraava sivu border-start-start-radius

Määrittely ja käyttö

border-start-end-radius ominaisuus määrittää elementin lohko-alkuosan (block-start) ja sisäisen suunnan loppuosan (inline-end) välistä nurkkakulman säteet.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode,text-orientation ja direction määrittää lohko- ja sisäisen suunnan. Tämä on myös syy, miksi nämä ominaisuudet vaikuttavat border-start-end-radius ominaisuuksien tulosta. English pagesillä, sisäinen suunta on vasemmalta oikealle, lohko suunta on alas.

jos border-start-end-radius ominaisuudella on kaksi arvoa, niin nurkka on elliptinen:

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

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

border-start-end-radius: 50px;

CSS border-start-end-radius ominaisuus ja border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius ja border-top-right-radius Ominaisuudet ovat hyvin samanlaisia, mutta border-start-end-radius Ominaisuus riippuu lohkon ja rivejä suunnasta.

Esimerkki

Esimerkki 1

Lisää kulmakulmat tietyille elementtien lohkon suunnan alkupäässä ja rivejä suunnan lopussa：

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

Kokeile itse

Esimerkki 2: Yhdistä direction ominaisuus

Lohkon suunnan alkupäässä ja rivejä suunnan lopussa kulmakulmien sijainti riippuu direction Ominaisuuden vaikutus：

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

Kokeile itse

Esimerkki 3: Yhdistä writing-mode ominaisuus

Lohkon suunnan alkupäässä ja rivejä suunnan lopussa kulmakulmien sijainti riippuu writing-mode Ominaisuuden vaikutus：

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
0	Oletusarvo。
length	Määritä lohkon suunnan alkupäässä ja rivejä suunnan lopussa kulmakulmien muoto. Katso：CSS yksiköt。
%	Määritä kulmakulmien muoto, joka ilmaisee elementin pituuden prosentteina vastaavassa akselissa.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso： initial。
inherit	Periisi isäntäelementistä tämän ominaisuuden. Katso： inherit。

Tekninen yksityiskohta

Oletusarvo：	0
Perintä:	Ei
Animaatioiden luominen：	Tuki. Katso：Animaatiotutkijaominaisuudet。
Versio：	CSS3
JavaScript-kieli：	object.style.borderStartEndRadius="50px"