Uyifaka njani i-CSS3 Border-Radius Effect

NguDavid Karlins, uDoug Sahlin

Iziphumo ze-CSS3-radius effect zichaza iikona ezijikeleziweyo. Kwaye, kuya kufuneka usebenzise isimaphambili esithile esikhankanyiweyo xa uchaza umda-umda. Nantsi imigaqo embalwa yokuchaza i-radius yomda:



  • Awunakho ukufaka umda-radius kwisikhethi (isitayile seCSS) esingenakho ukuphakama okuchaziweyo okanye ububanzi (ubuncinci enye okanye enye).



  • Ipropathi esisiseko yomda-umda kwi-CSS3 ngumda-radius, olandelwa lixabiso. Umzekelo, umda-radius: 12px; yenza iikona ezijikelezileyo kuzo zone iikona zento esetyenziswe kuyo. Ukujikeleza kweekona kuya kwanda ngeepikseli ezili-12 ezivela ezimbombeni.

  • Ungachaza iiradiyo ezahlukileyo kwikona nganye yomda. Umzekelo:



border-top-left-radius:1px; border-top-right-radius:2px; border-bottom-right-radius:3px; border-bottom-left-radius:4px;

Thatha lo mzekelo ulandelayo: isitayile seklasi esichaza yomibini imida kunye nomda radii. Uhlobo olulandelayo lweCSS lwenza ifayile ye-Imidaiklasi esebenzayo yomibini imida kunye nomda radii kuyo nayiphi na into esetyenzisiweyo:

.borders { border:12px solid gray; border-top-left-radius:48px; border-top-right-radius:24px; border-bottom-right-radius:12px; border-bottom-left-radius:6px; padding: 12px; }

Iziphumo zekhowudi eyandulelayo, njengoko kubonisiwe kwisikhangeli se-Chrome, sibonisa umkhethi weklasi (isitayile) ngomda ochaziweyo kunye neepropathi zemida yomda echaziweyo.

umfanekiso0.jpg



Ikhoneni elijikeleziweyo (umda-radius) ikhowudi isebenza kakuhle kwiinguqulelo zangoku ze-IE kunye neChannel kuba ezo zikhangeli azidingi isimaphambili sesi siphumo. Kodwa ukwenza umda wobubanzi bomda kwiMozilla Firefox, iibrawuza zeWebhu ezinje ngeSafari (kwidesktop / kwilaptop nakwiselfowuni), kunye nezinye iinguqulelo zeOpera, kuya kufuneka wenze iikopi ezintathu zekhowudi yomda weeradiyo kunye nezimaphambili ezifanelekileyo, ezinje:

.borders { border:12px solid gray; border-top-left-radius:48px; border-top-right-radius:24px; border-bottom-right-radius:12px; border-bottom-left-radius:6px; -moz-border-top-left-radius:48px; -moz-border-top-right-radius:24px; -moz-border-bottom-right-radius:12px; -moz-border-bottom-left-radius:6px; -webkit-border-top-left-radius:48px; -webkit-border-top-right-radius:24px; -webkit-border-bottom-right-radius:12px; -webkit-border-bottom-left-radius:6px; -o-border-top-left-radius:48px; -o-border-top-right-radius:24px; -o-border-bottom-right-radius:12px; -o-border-bottom-left-radius:6px; padding: 12px; }

Kuphela ziinguqulelo ezine zesitayile seCSS esiya kusebenza kulo mda kuzo zonke izikhangeli eziphambili, zangoku.

Iifolokhwe ezijonga iphepha kwizikhangeli ezindala kufuneka ziye kumava oyilo oluphuculweyo abaya kulifumana ukuba bebelibona iphepha kwisikhangeli sesizukulwana sangoku. Kodwa ngenxa yokuba isiphumo seCSS3 asiyomfuneko yokujonga owona mxholo wephepha, usafikeleleka (kwaye kulo mzekelo, umda usavela).