Gineadóir Cúinní Cruinn (border-radius)

Conas an gineadóir border-radius a úsáid

1. Tarraing na poncanna ar imill an réamhamhairc. Socraíonn gach ponc daite gha cothrománach cúinne; nuair atá Cúinní eilipseacha (8 luach) ticeáilte, socraíonn na poncanna bána na gathanna ingearacha.
2. Nó clóscríobh luachanna cruinne in Cúinní: Barr clé, Barr deas, Bun deas agus Bun clé, gach ceann acu le réimse Cothrománach agus réimse Ingearach.
3. Roghnaigh an Aonad: % (céatadán den bhosca) nó px (picteilíní). Athraíonn an t-aistriú na luachanna reatha, mar sin fanann an cruth mar a bhí.
4. Socraigh Leithead an bhosca (px) agus Airde an bhosca (px) chun freagairt do d’eilimint, agus úsáid Gach cúinne chun gach cúinne a chruinniú ag an am céanna.
5. Triail na Réamhshocruithe (Cruinn, Pilleacán, Ciorcal, Duilleog, Titim, Ubh, Ticéad agus trí bhlob) nó cliceáil Blob randamach le haghaidh cruth orgánach.
6. Tic Airíonna fadlámha más fearr leat na ceithre dhearbhú border-*-radius, ansin cóipeáil an Cód CSS leis an gcnaipe Cóipeáil.

Méarchlár: fócasaigh ponc agus brúigh na heochracha saighde chun a ghath a athrú céim amháin (10 le Shift).

Oibríonn an uirlis seo go hiomlán i do bhrabhsálaí. Ní chuirtear aon rud chuig freastalaí.

Comhréir border-radius

Glacann border-radius le haon luach amháin go ceithre luach, san ord barr clé, barr deas, bun deas, bun clé. Cosúil le corrlaigh, cóipeáiltear luachanna atá ar iarraidh ón gcúinne os coinne: cruinníonn border-radius: 10px 20px an barr clé agus an bun deas faoi 10px, agus an dá cheann eile faoi 20px. Scríobhann an uirlis an fhoirm is giorra choibhéiseach i gcónaí.

Is ceathrú eilips le dhá gha é gach cúinne i ndáiríre. Scarann slaiseáil na gathanna cothrománacha ó na gathanna ingearacha, rud a thugann suas le hocht luach:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Roimh an slaiseáil: gathanna cothrománacha na gceithre chúinne. Ina dhiaidh: na gathanna ingearacha. Nuair atá an dá liosta comhionann, fágtar an chuid slaiseála ar lár.

Picteilíní nó céatadáin?

• Tugann px an cuar céanna cibé méid atá san eilimint. Is é an rogha ceart é do chnaipí, cártaí agus réimsí ionchuir: border-radius: 8px.
• Tá % coibhneasta leis an eilimint: gathanna cothrománacha leis an leithead, gathanna ingearacha leis an airde. Déanann 50% ciorcal de chearnóg agus eilips de dhronuilleog. Is iad na céatadáin a thugann ar bhlobanna scálú leis an eilimint.

Le haghaidh cnaipe i gcruth pilleacáin, úsáid gath picteilíní atá ar a laghad leath na hairde. Déanann an réamhshocrú Pilleacán é sin go beacht do mhéid an bhosca a chuir tú isteach; oibríonn luach ollmhór mar 999px freisin.

Nuair a chuireann gathanna comhgheara suas níos mó ná an taobh a roinneann siad, laghdaíonn brabhsálaithe na gathanna go léir go comhréireach go dtí go n-oireann siad. Sin é an fáth nach mbriseann an cruth má tharraingíonn tú dhá láimhseáil thar a chéile.

Cruthanna blob

Úsáideann na réamhshocruithe blob agus Blob randamach ocht gcéatadán ina gcuireann an dá láimhseáil ar gach taobh suas le 100 %. Buaileann na cuair le chéile go beacht agus tá cuma púicín mhín ar an gcruth. Déan idirthréimhseacht idir dhá bhlob le transition CSS ar border-radius le haghaidh éifeacht “morfála”.