Sifa border-radius

Sifa border-radius huunda pembe zilizozungushwa kwa mpaka na mandharinyuma. Thamani ya sifa ni yoyote vipimo vya ukubwa. Thamani chaguomsingi: 0. Ni ufupi wa sifa border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

csskichagua {
  border-radius: thamani;
}

Idadi ya Thamani

Sifa inaweza kuchukua 1, 2, 3 au 4 thamani, zikipewa kwa nafasi:

Kuzunguka Kwa Duaradufu

Thamani mbili kwa kufyatua (/) huweka kuzunguka kwa duaradufu. Thamani kabla ya kufyatua inaonyesha kuzunguka kwa usogeaji, na thamani baada ya kufyatua - kuzunguka kwa wima:

csskichagua {
  border-radius: usogeaji / wima;
}

Ikiwa kuzunguka kunawekwa kwa pembe nyingi, basi kabla ya kufyatua zote za usogeaji hutajwa, na baada yake - zote za wima.

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe zote:

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

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

Результат:

Mfano

Tutaangalia jinsi kuzunguka kwa mpaka wa vitone kinavyoonekana:

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

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

Результат:

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe za ulinganifu mmoja, na kuzunguka kwa 40px - kwa pembe za ulinganifu wa pili:

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

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

Результат:

Mfano

Tutaweka kuzunguka kwa 10px kwa pembe ya juu kushoto, kuzunguka kwa 30px kwa pembe ya chini kulia, na kuzunguka kwa 50px kwa pembe za ulinganifu wa pili:

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

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

Результат:

Mfano

Tutaweka kuzunguka tofauti kwa kila pembe:

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

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

Результат:

Mfano

Tutafanye kuzunguka kwa duaradufu, tukiweka 20px kwa sehemu ya usogeaji ya kuzunguka, na 40px kwa sehemu ya wima:

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

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

Результат:

Mfano

Sasa tuweke kuzunguka tofauti kwa duaradufu kwa pembe zote kwa pekee:

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

Результат:

Mfano

Ikiwa kwa kipengele cha mraba kuweka kuzunguka, sawa na nusu ya upande wa mraba, basi itatokea duara:

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

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

Результат:

Mfano

Ikiwa kuweka kuzunguka, kubwa kuliko upande wa mraba, basi bado itatokea duara:

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

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

Результат:

Mfano

Duara pia inaweza kupatikana, ikiwa kuweka border-radius kwa 50% (faida ni kwamba wakati wa kubadilisha ukubwa wa mraba haitabidi kubadilisha kuzunguka):

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

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

Результат:

Mfano

Ikiwa kuweka border-radius kwa asilimia kwa mstatili, basi itatokea kuzunguka kwa duaradufu. Ikiwa upana umepewa kwa 400px, urefu kwa 200px, na border-radius kwa 10%, basi hii ni sawa, kana kwamba ingeliandikwa 40px/20px:

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

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

Результат:

Mfano

Tutaweka thamani border-radius kwa 50% kwa mstatili - itatokea duaradufu:

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

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

Результат:

Mfano

Sifa border-radius haizunguki tu pembe za mpaka, bali pia za mandharinyuma:

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

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

Результат:

Angalia Pia