Savybė border-radius

Savybė border-radius sukuria apvalius kampus sienai ir fonui. Savybės reikšmė gali būti bet kokie dydžio vienetai. Numatytoji reikšmė: 0. Tai yra sutrumpinimas savybėms border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksė

cssselektorius {
  border-radius: reikšmė;
}

Reikšmių skaičius

Savybė gali priimti 1, 2, 3 arba 4 reikšmes, nurodomas per tarpą:

Eliptinis apvalinimas

Dvi reikšmės per pasvirąjį brūkšnį nustato eliptinį apvalinimą. Reikšmė prieš pasvirąjį brūkšnį nurodo horizontalų apvalinimą, o reikšmės po pasvirojo brūkšnio - vertikalų:

cssselektorius {
  border-radius: horizontalus / vertikalus;
}

Jei nustatomas apvalinimas keliems kampams, tai prieš pasvirąjį brūkšnį išvardijami visi horizontalūs apvalinimai, o po jo - visi vertikalūs.

Pavyzdys

Nustatykime 10px apvalinimą visiems kampams:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Pažiūrėkime, kaip atrodo apvalinimai sienai taškų pavidalu:

html<div id="elem"></div>

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Nustatykime 10px apvalinimą vienos įstrižainės kampams, o 40px apvalinimą - antros įstrižainės kampams:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Nustatykime 10px apvalinimą viršutiniam kairiajam kampui, 30px apvalinimą apatiniam dešiniajam kampui, o 50px apvalinimą - antros įstrižainės kampams:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Nustatykime skirtingus apvalinimus kiekvienam iš kampų:

html<div id="elem"></div>

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Sukurkime eliptinį apvalinimą, nustatydami 20px horizontaliai apvalinimo daliai, o 40px - vertikaliai:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Dabar nustatykime skirtingą eliptinį apvalinimą visiems kampams atskirai:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Pavyzdys

Jei kvadratiniam blokui nustatyti apvalinimą, lygų pusei kvadrato kraštinės, gausite apskritimą:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Pavyzdys

Jei nustatytumėte apvalinimą, didesnį nei kvadrato kraštinė, vis tiek gautumėte apskritimą:

html<div id="elem"></div>

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Pavyzdys

Apskritimą taip pat galima gauti, jei nustatytumėte border-radius į 50% (pranašumas tas, kad keičiant kvadrato dydžius nereikės keisti apvalinimo):

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Pavyzdys

Jei nustatytumėte border-radius procentais stačiakampiui, gautumėte eliptinį apvalinimą. Jei plotis nustatytas 400px, aukštis 200px, o border-radius 10%, tai tas pats, kaip jei būtų parašyta 40px/20px:

html<div id="elem"></div>

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Pavyzdys

Nustatykime reikšmę border-radius į 50% stačiakampiui - gausite elipsę:

html<div id="elem"></div>

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Pavyzdys

Savybė border-radius apvalina ne tik sienos kampus, bet ir fono:

html<div id="elem"></div>

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Taip pat žiūrėkite