Border-radius հատկությունը

border-radius հատկությունը ստեղծում է կլորացված անկյուններ եզրագծի և ֆոնի համար: Հատկության արժեքը կարող է լինել ցանկացած չափման միավոր: Լռելյայն արժեքը՝ 0: Հանդիսանում է հետևյալ հատկությունների հապավում՝ border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius:

Շարահյուսություն

cssընտրիչ {
  border-radius: արժեք;
}

Արժեքների քանակը

Հատկությունը կարող է ընդունել 1, 2, 3 կամ 4 արժեքներ, որոնք նշվում են բացատով բաժանված՝

Էլիպսային կլորացում

Երկու արժեք՝ բաժանված շեղագծով, սահմանում են էլիպսային կլորացում: Շեղագծից առաջ գրված արժեքը նշում է հորիզոնական կլորացումը, իսկ շեղագծից հետո գրված արժեքները՝ ուղղահայաց կլորացումը:

cssընտրիչ {
  border-radius: հորիզոնական / ուղղահայաց;
}

Եթե նշվում են կլորացումներ մի քանի անկյունների համար, ապա շեղագծից առաջ թվարկվում են բոլոր հորիզոնական կլորացումները, իսկ դրանից հետո՝ բոլոր ուղղահայաց կլորացումները:

Օրինակ

Սահմանենք 10px կլորացում բոլոր անկյունների համար:

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

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

Результат:

Օրինակ

Տեսնենք, թե ինչպիսին է կետերով եզրագծի կլորացումը:

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

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

Результат:

Օրինակ

Սահմանենք 10px կլորացում միեւանյուղի անկյունների համար, իսկ 40px կլորացում՝ երկրորդ անկյունագծի անկյունների համար:

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

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

Результат:

Օրինակ

Սահմանենք 10px կլորացում վերևի ձախ անկյունի համար, 30px կլորացում ներքևի աջ անկյունի համար, իսկ 50px կլորացում՝ երկրորդ անկյունագծի անկյունների համար:

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

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

Результат:

Օրինակ

Սահմանենք տարբեր կլորացումներ յուրաքանչյուր անկյունի համար:

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

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

Результат:

Օրինակ

Եկեք ստեղծենք էլիպսային կլորացում՝ սահմանելով 20px կլորացում հորիզոնական մասի համար, իսկ 40px՝ ուղղահայաց մասի համար:

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

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

Результат:

Օրինակ

Այժմ սահմանենք տարբեր էլիպսային կլորացումներ բոլոր անկյունների համար առանձին:

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

Результат:

Օրինակ

Եթե քառակուսի բլոկի համար սահմանվի կլորացում, որը հավասար է քառակուսու կողմի կեսին, ապա կստացվի շրջան:

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

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

Результат:

Օրինակ

Եթե սահմանվի քառակուսու կողմից մեծ կլորացում, ապա այնուամենայնիվ կստացվի շրջան:

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

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

Результат:

Օրինակ

Շրջան կարելի է ստանալ նաև՝ սահմանելով border-radius-ը 50% (առավելությունն այն է, որ քառակուսու չափերը փոխելիս չի պահանջվում փոխել կլորացումը):

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

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

Результат:

Օրինակ

Եթե border-radius-ը սահմանվի տոկոսներով ուղղանկյունի համար, ապա կստացվի էլիպսային կլորացում: Եթե լայնությունը սահմանված է 400px, բարձրությունը՝ 200px, իսկ border-radius-ը 10%, ապա դա նույնն է, ինչ եթե գրվեր 40px/20px:

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

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

Результат:

Օրինակ

Սահմանենք border-radius հատկության արժեքը 50% ուղղանկյունի համար - կստացվի էլիպս:

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

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

Результат:

Օրինակ

border-radius հատկությունը կլորացնում է ոչ միայն եզրագծի անկյունները, այլեւ ֆոնը:

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

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

Результат:

Տեսեք նաև