CSS apmales un kontūras ir vērtīgi rīki tīmekļa dizaineriem, kuri vēlas piešķirt vietnei eleganci. Tos ir viegli lietot, tiklīdz jūs zināt, kā tie darbojas, un tie ir pietiekami daudzpusīgi, lai apmierinātu dažādas vajadzības. Apskatīsim CSS robežas, lai redzētu, kur jums vajadzētu sākt.
Kāda ir atšķirība starp robežu un kontūru CSS?
CSS kontūras un apmales veido divus no ārējiem slāņiem CSS kastes modelis, sēžot starp robežām un malām. Lai gan šīs īpašības ir līdzīgas, tām ir dažādas vērtības un mērķi.
Pirmkārt, CSS kontūras atrodas ārpus robežām. Tas nozīmē, ka tie var pārklāties ar saturu ārpus elementa, kuram tos lietojat. Līdz ar to CSS apmales maina elementa izmērus, bet kontūras nemaina.
Ja jums ir grūtības vizualizēt robežu un kontūru stilus, varat izmantot savu pārlūkprogrammas izstrādes rīki atkļūdošanai viņiem.
CSS robeža un koplietojamo īpašumu vērtību izklāsts
Neskatoties uz atšķirībām, CSS robežām un kontūrām ir kopīgas vērtības. Saīsinājums, ko izmantojat katram, ir arī ļoti līdzīgs.
CSS robežu un kontūru īsraksts
Tāpat kā citiem sarežģītiem CSS rekvizītiem, gan apmalēm, gan kontūrām ir pieejama stenogrāfija. Abiem šiem īpašumiem ir vienāds stenogrāfijas opciju formāts, un tas izskatās šādi.
robeža: platumsstilskrāsa;
kontūru: platumsstilskrāsa;Tādējādi tiek izveidoti noteikumi, kas izskatās šādi, kad tie darbojas. Tomēr, protams, šis saīsinājums neaptver visas šiem rekvizītiem pieejamās vērtības.
apmale: 10 pikseļi vienkrāsains zils;
kontūra: 20 pikseļi vienkrāsains sarkans;Šie saīsinātie CSS apmales un kontūru noteikumi rada plānu zilu apmali ar biezu sarkanu kontūru.
Tāpat kā citus saīsinātos CSS rekvizītus, varat izmantot arī atsevišķus rekvizītus, lai sasniegtu tādus pašus rezultātus.
CSS apmales platums un kontūras platums
Apmales un kontūru platumi ir izvēles CSS rekvizītu vērtības, kas nosaka izmantoto apmaļu un kontūru biezumu. Šo rekvizītu formāts ir vienāds.
kontūras platums: 20 pikseļi;
apmales platums: 10 pikseļi;Apmales ļauj iestatīt atsevišķu platumu katrai elementa pusei, bet kontūras to nedara. Vairāk par to varat lasīt nākamajās sadaļās.
CSS apmales un kontūras stils
CSS apmalēm un kontūrām ir dažādi stili. Visizplatītākās ir viengabalainās apmales, taču varat būt radošs, izmantojot apmales un kontūras.
apmales stils: ciets;
kontūras stils: punktēts;Pilnu dažādu CSS apmaļu un kontūru stilu sarakstu varat atrast šī raksta beigās.
CSS apmales krāsa un kontūras krāsa
Tāpat kā ar citiem uz krāsu balstītiem CSS rekvizītiem, apmales un kontūras pieņem visas CSS likumīgās krāsas. Tas ietver hex kodus, RGB kodus, stenogrammas krāsas un daudz ko citu.
apmales krāsa: zila;
kontūras krāsa: #ff0000;Varat arī izmantot krāsu gradientus, strādājot ar CSS apmalēm un kontūrām.
CSS robežu īpašuma vērtības
Līdzās kopīpašuma vērtībām robežām un kontūrām ir arī unikālas vērtības, ko izpētīt. CSS robežām ir divas unikālas īpašības, kuras ir vērts apgūt.
CSS robežas rādiuss
Pievienojot rādiusu elementa apmalei, jūs varat daudz kontrolēt tā formu. Katram elementa stūrim var būt atšķirīgs rādiuss, un šo rekvizītu var iestatīt pat tad, ja apmales stils ir iestatīts uz Nav.
apmales rādiuss: 20 pikseļi;Varat iestatīt vienu vērtību, lai mainītu visu stūru rādiusu.
Varat arī sadalīt stūrus grupās augšējā kreisajā/apakšējā labajā un augšējā labajā/apakšējā kreisajā pusē.
apmales rādiuss: 10 pikseļi 20 pikseļi;Tādējādi ar HTML elementiem ir viegli izveidot interesantas formas.
Visbeidzot, katram stūrim var iestatīt savu rādiusu.
apmales rādiuss: 10 pikseļi 20 pikseļi 30 pikseļi 40 pikseļi;Šīs vērtības tiek piemērotas pulksteņrādītāja virzienā, sākot no augšējā kreisā stūra.
CSS robežas sānu rekvizīti
Atšķirībā no kontūrām, katrai apmales pusei varat iestatīt unikālu vērtību daudziem tās rekvizītiem. Tādējādi katrai elementa pusei ir iespējams piešķirt atšķirīgu platumu.
apmale-left-width: 10px;
apmale-labais-platums: 20px;
apmales augšdaļas platums: 30 pikseļi;
apmales apakšas platums: 40 pikseļi;Varat arī iestatīt neatkarīgus CSS apmales stilus katrai elementa pusei.
apmales-left-style: solid;
apmales-labais stils: punktēts;
apmales-top-style: svītrots;
apmales-bottom-style: dubultā;Un, ja vēlaties, varat mainīt katras puses krāsu.
apmales-left-style: zils;
apmales-labais stils: #ff0000;
apmales-top-style: #00ff00;
apmales-bottom-style: rgb (0, 0, 255);CSS apmales darbojas ar parasto saīsinājumu, lai apvienotu šādi.
apmale-kreisais: 10 pikseļi vienkrāsains zils;
robeža pa labi: 20px punktēts #00ff00;
apmale augšpusē: 30px ar svītru #ff0000;
apmale-apakšā: 40px dubultārgb(0, 0, 255);CSS Outline īpašuma vērtības
Tāpat kā CSS apmalēm, kontūrām ir unikāls īpašums; kontūras nobīde.
CSS kontūru nobīde
Pievienojot kontūrai nobīdi, starp sevi un galveno elementu tiek izveidota atstarpe. Šai nobīdei ir jābūt vienādai katrā kontūras pusē, un rekvizīts pieņem tikai vienu vērtību.
kontūru nobīde: 10 pikseļi;Tas var būt lielisks veids, kā izmantot trešo apmali elementiem, kas atbilst jūsu fona krāsai.
CSS robežu un kontūru stili
Gan apmalēm, gan kontūrām ir nepieciešams stils, lai tās darbotos. Ir pieejami desmit stili, no kuriem izvēlēties, tostarp apmales, kas vispār netiek rādītas.
apmales stils: ciets;
apmales stils: punktēts;
apmales stils: svītrots;
apmales stils: rieva;
apmales stils: grēda;
apmales stils: dubultā;
apmales stils: ielaidums;
apmales stils: sākumā;
apmales stils: paslēpts;
apmales stils: nav;Robežām ir vienādi stili ar kontūrām, tikai ar kontūru stilu, kas iestatīts kā īpašums.
Kā lietot CSS robežas un kontūras
Kontūras un apmales ir lieliski noformēšanas rīki vietņu veidotājiem. Izmantojot šos CSS rekvizītus, varat definēt savas vietnes izskatu un darbību, taču jums būs jākļūst radošam.
