Chun cruthanna bosca a dhearadh le haghaidh suíomhanna gréasáin, is gné bhunúsach é an mhaoin CSS border-radius a thuiscint agus a chur i bhfeidhm. Ligeann an uirlis seo duit cruinneacht cúinní bosca a choigeartú go beacht, cibé acu an bhfuil tú ag iarraidh imill bhoga a chruthú nó cruthanna casta orgánacha a dhearadh. Déantar gach cúinne a tharraingt go díreach i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.
Na hIonchuir agus Rialú na gCúinní
Oibríonn an gineadóir trí shraith rialtán a ligeann duit gach gné den chruinneacht a ionramháil:
- Sleamhnáin: Úsáidtear iad seo chun cruinneacht na gcúinní a choigeartú ar scála 0-100. Nuair a bhíonn na cúinní nasctha, rialaíonn sleamhnán amháin dar lipéad "Gach cúinne" na ceithre chúinne in éineacht. Nuair nach bhfuil siad nasctha, tá ceithre shleamhnán ar fáil: "Barr ar chlé", "Barr ar dheis", "Bun ar dheis", agus "Bun ar chlé". I modh elipseach, tá sleamhnáin "Cothrománach" agus "Ingearach" ag gach cúinne ar leith.
- Roghnaíonad: Ligeann sé seo duit athrú idir na haonaid "px" (picteilíní) agus "%" (céatadán).
- Toglaí: Tá scoránaigh ann chun "Nasc gach cúinne" (chun na cúinní a nascadh nó a dhícheangal) agus "Cúinní elipseacha" (chun an modh elipseach a ghníomhachtú nó a dhíghníomhachtú).
- Réamhsocruithe: Cnaipí tapa iad seo chun cruthanna caighdeánacha a chur i bhfeidhm láithreach: "Géar", "Cruinnithe", "Ciorcal", "Smál", agus "Duilleog". Is é 24 an luach tosaigh ar an sleamhnán, rud a tháirgeann an cód
border-radius: 24px;ar dtús.
Mapáil na gCúinní agus Aonaid CSS
Leanann mapáil na sleamhnán treo an deiseal, ag tosú ag an gcúinne barr-clé, ansin barr-deas, bun-deas, agus ar deireadh bun-clé. Tá difríocht bhunúsach idir an dá chineál aonad atá ar fáil sa gineadóir:
| Aonad | Oibriú sa Chód | Éifeacht Deartha |
|---|---|---|
| px | Cruinníonn sé an cúinne de réir luach seasta picteilíneach. | Fanann an cruinneacht mar an gcéanna beag beann ar mhéid an bhosca. |
| % | Cruinníonn sé an cúinne i gcoibhneas le toisí an bhosca féin. | Leanann an céatadán cothrománach leithead an bhosca, agus leanann an céatadán ingearach an airde. |
Má úsáidtear céatadán ar eilimint chearnach agus má shocraítear gach cúinne ag 50%, claochlaítear an chearnóg ina ciorcal foirfe.
An Modh Elipseach le haghaidh Cruthanna Orgánacha
Nuair atá an modh elipseach múchta, is ceathrú ciorcail le gath amháin gach cúinne den bhosca. Nuair a ghníomhachtaítear an modh elipseach, faigheann gach cúinne gath cothrománach agus gath ingearach ar leith. Ligeann an teicníocht seo cruthanna níos boige agus níos orgánaí a chruthú, mar shampla cruthanna cosúil le duilleoga nó smáil.
Sna cásanna seo, úsáideann CSS an fhoirm slais dhá luach (mar shampla, border-radius: 10px / 20px; nuair a scarann an tslat an gath cothrománach ón ngath ingearach). Scríobhann an gineadóir an fhoirm slais seo go huathoibríoch nuair atá an modh elipseach ar siúl, agus filleann sé ar an mbeagfhoirm shimplí chomh luath is a bhíonn na cúinní cruinn arís.
Cruthanna Coitianta a Dhearadh
Is féidir cruthanna dearaidh clasaiceacha a chruthú go tapa leis na rialacha seo a leanas:
- Ciorcal Foirfe: Nasc na cúinní go léir, athraigh an t-aonad go dtí "%", agus socraigh an luach ag 50% ar eilimint atá cearnach cheana féin. Socraíonn an réamhshocrú "Ciorcal" an cruth seo go huathoibríoch.
- Cnaipe i gCruth Piolla: Coinnigh an t-aonad mar "px" agus tarraing na sleamhnáin thar leath airde an chnaipe. Fanfaidh na taobhanna slánchruinn ag leithead ar bith, rud atá oiriúnach do dhearadh freagrúil.
- Smál (Smál): Gníomhaigh an modh elipseach, díchúpláil na cúinní, agus athraigh na gathanna cothrománacha agus ingearacha go neamhshiméadrach chun cruth sreabhach a chruthú.
Na hAschuir agus Cur i bhFeidhm an Chóid
Taispeánann an uirlis dhá phríomhaschur:
- Preview: Bosca amhairc a thaispeánann an cruth go díreach de réir mar a athraíonn tú na sleamhnáin.
- CSS: An cód CSS críochnaithe faoin gceannteideal "CSS".
Chun an cód a úsáid, cliceáil ar an gcnaipe "Cóipeáil CSS" chun an téacs a chóipeáil chuig do ghearrthaisce, agus greamaigh go díreach é i stílbhileog do thionscadail.
Ceisteanna Coitianta
Conas a oibríonn na ceithre chúinne agus px in aghaidh %? Mapálann na ceithre sleamhnán, de réir deiseal, chuig na cúinní barr-clé, barr-deas, bun-deas agus bun-clé. I bpicteilíní, cruinnítear cúinne de réir méid seasta; i gcéatadán, cruinnítear é i gcoibhneas leis an mbosca — leanann céatadán cothrománach an leithead agus leanann céatadán ingearach an airde, ionas go ndéanann 50% ciorcal de chearnóg.
Cad a dhéanann an modh elipseach? Nuair atá sé múchta, is ceathrú ciorcail le gath amháin gach cúinne. Nuair a chuirtear ar siúl é, faigheann gach cúinne gath cothrománach agus gath ingearach ar leith, rud a ligeann duit cruthanna boige orgánacha a chruthú. Scríobhann an gineadóir an fhoirm slais dhá luach duit agus filleann sé ar an mbeagfhoirm nuair a bhíonn na cúinní cruinn arís.
Conas is féidir liom ciorcal foirfe nó piolla a dhéanamh? Nasc na cúinní, athraigh go céatadán agus socraigh go 50% é: déantar ciorcal de chearnóg. I gcás cnaipe i gcruth piolla, coinnigh picteilíní ina ionad sin agus tarraing cúinne thar leath airde an chnaipe — fanfaidh na taobhanna slánchruinn ag leithead ar bith. Socraíonn an réamhshocrú Ciorcal an chéad chás sin le cliceáil amháin.