Kõik on juba ammu väsinud traditsioonilistest ristkülikukujulistest nurkadest veebisaidi kujundamisel. Moes on ümarad nurgad, mis on tehtud mitte pilte kasutades, vaid läbi stiilide, mille puhul kasutatakse piiri-raadiuse omadust. Sellel omadusel võib olla üks, kaks, kolm või neli tühikuga eraldatud väärtust, mis määravad kõigi nurkade raadiuse või igaüks eraldi.

Tabelis 1 antud erinevad kogused väärtused ja sel juhul saadud ploki tüüp.

Kood	Kirjeldus	Vaade
div (äärise raadius: 10 pikslit; )	Ümardamisraadius kõigi nurkade jaoks korraga.
div (äärise raadius: 0 10 pikslit; )	Esimene väärtus määrab ülemise vasaku ja alumise parema nurga raadiuse, teine ​​väärtus määrab raadiuse parema ülanurga ja alumise vasaku nurga jaoks.
div (äärise raadius: 20 pikslit 10 pikslit 0; )	Esimene väärtus määrab ülemise vasaku nurga raadiuse, teine ​​- nii paremas ülanurgas kui ka alumises vasakpoolses nurgas ja kolmas väärtus - alumises paremas nurgas.
div (äärise raadius: 20 pikslit 10 pikslit 5 pikslit 0; )	Määrab järjestikku ülemise vasaku, ülemise parema, alumise parema ja alumise vasaku nurga raadiuse.

Näide 1 näitab, kuidas luua ümarate nurkadega plokki.

Näide 1. Ploki nurgad

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Selle näite tulemus on näidatud joonisel fig. 1.

Riis. 1. Ümarate nurkadega plokk

Huvitava efekti saab, kui seate ümardamisraadiuse suuremaks kui pool elemendi kõrgusest ja laiusest. Sel juhul saate ringi. Näide 2 näitab, kuidas luua ümmargune nupp koos pildiga.

Näide 2: Ümar nupp

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Selle näite tulemus on näidatud joonisel fig. 2.

Riis. 2. Ümar nupp

IN Opera brauserümardamine kuni rakendatakse valesti, kui piiri omaduse kaudu pole piiri määratud.

Piiriraadiuse omadust saab kombineerida teiste omadustega, näiteks lisada elemendile varju. Näites 3 tehakse ringide komplekt, millest üks on esile tõstetud kasutades box-shadow . Seda komplekti saab kasutada lehtedel või fotodel navigeerimiseks.

Näide 3. Sära

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Selle näite tulemus on näidatud joonisel fig. 3.

Riis. 3. Helenge ümber ringi

KOOS kasutades piiriraadiust Plokile saab teha mitte ainult ringi, vaid ka ellipsi, aga ka elliptilise ümardamise. Selleks peate kirjutama mitte ühe väärtuse, vaid kaks, eraldades need kaldkriipsuga. 20px/10px kirjutamine tähendab, et filee horisontaalraadius on 20 pikslit ja vertikaalraadius 10 pikslit. Näide 4 näitab, kuidas luua elliptilisi nurki, et lisada fotole koomiksistiilis pealkiri.

Näide 4: Ellipsid

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Sa oled iseenda õpetaja

Selle näite tulemus on näidatud joonisel fig. 4.

Riis. 4. Elliptiliste nurkade kasutamine

Samuti saate muuta piltide nurkade välimust, lisades img-valijale atribuudi border-radius, nagu on näidatud näites 5.

Näide 5: pildid

HTML5 CSS3 IE 9+ Cr Op Sa Fx

CSS3 raam laiendab võimalust vormindada elementide piire atribuutidega, mis võimaldavad nurgad ümber element ja ka kasutamine pilte elemendi piiride kujundamiseks.

Ümardatud nurgad ja pildiraamid

1. Nurkade ümardamine piirderaadiusega

Brauseri tugi

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -veebikomplekt-
Ooper: 10.5
iOS Safari: 7.1
Opera Mini: —
Androidi brauser: 4.1
Chrome Androidile: 44

Kinnistu võimaldab ümardada väiketähtede ja ploki elemendid. Iga nurga kõver määratakse ühe või kahe raadiusega, mis määravad selle kuju − ring või ellips. Raadius kehtib kogu taustale, isegi kui elemendil pole äärist, määratakse sekandi täpne asukoht atribuudi background-clip abil.

Piiriraadiuse atribuut võimaldab teil ümardada kõik nurgad korraga ja kasutades atribuute border-top-left-radius , border-top-parem raadius , border-bottom-right-radius , border-bottom-left-radius saab iga nurga eraldi ümardada.

Kui määrate piiriraadiuse atribuudile kaks väärtust, ümardab esimene väärtus üleval vasakul Ja alumine parem nurk ja teine ​​- üleval paremal Ja all vasakul.

Väärtused määratud kaudu / määrata horisontaalne Ja vertikaalsed raadiused. Vara ei ole päritud.

Valikud

Div (laius: 100 pikslit; kõrgus: 100 pikslit; ääris: 5 pikslit tahke;).r1 (äärise raadius: 0 0 20 pikslit 20 pikslit;).r2 (äärise raadius: 0 10 pikslit 20 pikslit;).r3 (äärise raadius: 10 pikslit 20 pikslit ;) .r4 (äärise raadius: 10px/20px;) .r5 (äärise raadius: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (äärise raadius: 10px 20px 4px 3px;) piiri raadius: 50%;).r8 (ääris-ülemine: puudub; ääris-alumine: puudub; äärise raadius: 30px/90px;).r9 (ääris-alumine-vasak-raadius: 100px;).r10 (ääris -raadius: 0 100%;).r11 (ääris-raadius: 0 50% 50% 50%;).r12 (ääris-ülemine-vasak-raadius: 100% 20px; ääris-all-parem-raadius: 100% 20px ;)
Riis. 1. Näited erinevaid valikuid plokkide nurkade ümardamine

2. Border-image

Brauseri tugi

IE: 11.0
Firefox: 15,0, 3,5 -moz-
Chrome: 16.0, 7.0 -veebikomplekt-
Safari: 6.0, 3.0 -veebikomplekt-
Ooper: 15,0, 11,0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Androidi brauser: 4.4, 4.1 -veebikomplekt-
Chrome Androidile: 42

Atribuut võimaldab teil määrata pildi elemendi raamiks. Kujutise põhinõue on, et see peab olema sümmeetriline. Kinnistu sisaldab järgmised väärtused: (border-image: laius lähtelõigu korduse algus;) .

Selle abiga lihtne pilt Saate need raamid elemendi jaoks hankida.

/* Näide 1 */ div ( laius: 260 pikslit; kõrgus: 100 pikslit; äärise stiil: ühtlane; äärise kujutise laius: 15 pikslit; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: venitus png; border-image-slice: 30 border-image-repeat;
Riis. 2. Näide plokkide piiride kujundamisest pildi abil

Lõiked A - B - C - D moodustavad raami nurgad ja nende vahel asuv kujunduse osa täidab raami ülejäänud ruumi vastavalt antud väärtus border-image-repeat omadused. Nurga suurus (tolli selles näites see on number 30) määratakse atribuudi border-image-slice väärtuse abil.

2.1. ääris-pildi laius

Atribuut määrab elemendi äärise pildi laiuse. Kui laiust pole määratud, on see vaikimisi 1.

ääris-pildi laius
Väärtused:
pikkus	Määrab äärise laiuse pikkuseühikutes - px/em. Korraga saate määrata ühest kuni nelja väärtuseni. Kui on määratud üks väärtus, on raami kõigi külgede laius sama, kaks väärtust määravad ülemise-all ja parem-vasak laiuse jne.
number	Arvväärtus, millega piiri laiuse väärtus korrutatakse.
%	Elemendi äärise laius arvutatakse vastavalt pildi suurusele. Horisontaalne laiuse suhtes, vertikaalne - kõrguse suhtes.
auto	Vastab piiri-pildi-lõigu väärtusele.
esialgne
pärida

Süntaks

Div (border-image-width: 30px;) Joon. 3. Näide pildiraami laiuse määramisest kasutades erinevat tüüpi väärtusi

2.2. piiri-pildi-allikas

Atribuut määrab tee pildile, mida kasutatakse ploki ääriste kaunistamiseks.

Süntaks

Div (border-image-source: url(border.png);)

2.3. border-image-slic elemendid

Atribuut määrab elemendi piiride määratlemiseks kasutatavate pildiosade suuruse ja jagab pildi üheksaks osaks: neljaks nurgaks, neljaks nurgavaheliseks servaks ja keskosaks.

Väärtused:
number	Raamiosade suurust saab määrata ühe, kahe, kolme või nelja väärtusega. Üks väärtus määrab elemendi mõlemal küljel sama suurusega äärised. Kaks väärtust: esimene määrab ülaosa suuruse ja alumine piir, teine ​​- parem ja vasak. Kolm väärtust: esimene määrab ülemise äärise suuruse, teine ​​- parem ja vasak ning kolmas - alumine piir. Neli väärtust: määrab ülemise, parema, alumise ja vasaku äärise suuruse. Numbriline väärtus tähistab pikslite arvu.
%	Ääriste suurused arvutatakse vastavalt pildi suurusele. Horisontaalne laiuse suhtes, vertikaalne - kõrguse suhtes.
täita	Väärtus näidatakse koos numbri või protsendiga. Kui see on määratud, ei lõigata pilti ära kaadri siseserv, vaid see täidab ka raami sees oleva ala.
esialgne	Määrab selle atribuudi vaikeväärtuse.
pärida	Pärib selle atribuudi väärtuse emaelemendilt.

Süntaks

Div (ääris-pilt-lõik: 50 20;)
Riis. 4. Näide pildiraami lõikude määramisest

2.4. ääris-pilt-kordus

See atribuut määrab, kuidas taustpilt täidab kaadri nurkadevahelise ruumi. Saab määrata kas ühe väärtuse või väärtuste paari abil.

Süntaks

Div (border-image-repeat: kordus;) Joon. 5. Näide pildiraami keskosa kordamisest erinevat tüüpi väärtusi kasutades

2.5. border-image-outset

Atribuut võimaldab teil nihutada pildiraami määratud pikkuse võrra elemendi piiridest kaugemale. Saab määrata ühe või nelja väärtusega.

Süntaks

Div (ääris-pildi algus: 10 pikslit;)
Riis. 6. Näide pildiraami nihutamisest erinevat tüüpi väärtusi kasutades

3. Välisraami nihe piirjoon-nihe

Kinnistu määrab piiri vahelise kauguse piiri element ja atribuudi outline abil loodud välispiir.

/*Joonis 1:*/ img ( ääris: 1px ühtlane roosa; piirjoon: 1px katkendlik hall; piirjoonenihe: 3px; ) /*Joonis 2:*/ img ( border-width: 1px 10px; border-style: solid; äärevärv: roosa piirjoon: 1px piirjoonenihe: 3px;
Riis. 7. Näide pildi kaunistamisest välimise raamiga

4. Gradiendi raam

Piiripildi väärtus võib olla mitte ainult kujutis, vaid ka gradienttäide.

Läbipaistev raam

Läbipaistev on üks värvidest. Nii saate määrata piirid elemendi kõikidele külgedele korraga või igale küljele eraldi. Piiri paksust kontrollib piirilaiuse omadus.

* (box-sizing:border-box;).wrap (kõrgus: 200px; polsterdus: 25px; taust: #00E4F6; ) .gradient (kõrgus: 150px; laius: 50%; veeris: 0 automaatne; ääris: 10px läbipaistev ääriskujutis: lineaarne gradient (paremale, läbipaistev 0%, #ADF2F7 100%);

Postiümbrik

* (box-sizing:border-box;).wrap (kõrgus: 200px; polsterdus: 25px; ) .gradient (kõrgus: 150px; laius: 50%; veeris: 0 automaatne; ääris: 10px läbipaistev; ääris-pilt: 10 korduvat lineaarset gradienti (45 kraadi, #A7CECC, #A7CECC 10px, läbipaistev 10px, läbipaistev 20px, #F8463F 20px, #F8463F 30px, läbipaistev 30px, läbipaistev 40px)

Ümardatud nurgad CSS-is saab teha mitmel viisil, väga paljudel ja mõnda neist võib pidada aegunuks, kuna CSS 3 tutvustas uusi omadusi, mis võimaldavad teil HTML-i elementide nurki ümardada. Kuid esiteks vanad brauserid neid omadusi ei toeta ja teiseks sünnivad disaineri loomingulises ajus vahel sellised ideed, mida päästa suudavad vaid vanad meetodid. Seetõttu vaatleme siin mitmeid erinevaid võimalusi ümarate nurkade loomiseks CSS-is: kõige lihtsamast kuni üsna keerukani.

Nendes näidetes on algselt plokielementide nurgad ümardatud ja mõnes näites kasutatakse neid plokke abielementidena. Kuid pidage meeles, et sama saate hõlpsalt teha ka reataseme elementidega, vajadusel seadistades need ploki või inline-blockiga.

Ümardatud nurgad CSS 3-s ilma kujutisteta

See näide kasutab CSS 3 atribuute, mis võimaldavad teil hõlpsalt nurki ümardada ilma piltide abita.

HTML ja CSS Näide: nurkade ümardamine kasutades CSS-i 3 pilti pole

Blokeeri sisu.

Näite kirjeldus

1. Nurkade ümardamiseks kasutame atribuuti CSS 3, millest saavad aru kõik kaasaegsed brauserid.
2. Vanemate brauserite Firefox, Chrome ja Safari puhul kasutame spetsiaalseid atribuute eesliidetega -moz- ja -webkit-, mis ilmusid enne peamise atribuudi toetamist. Kahjuks pole sarnaseid analooge vanade Opera ja IE jaoks. Pange tähele, et keeruliste kõverate loomisel ei pruugi eesliidetega omadused õigesti töötada. Seetõttu olid need CSS-koodis põhiomadusest kõrgemal loetletud, nii et vastavalt stiili prioriteedid, kasutasid seda brauserid, mis juba mõistavad sõna "puhas".

Eesliidetega atribuudid ei ole CSS-i spetsifikatsioonis, mistõttu nende kasutamine toob kaasa kehtetu koodi.

Ümardatud nurgad ilma piltideta CSS-is

Ka selles näites pole pilte, vaid kasutatakse lisaplokke. Meetodi olemus seisneb selles, et enne ja pärast põhisisu näidatakse mitu plokki, mis sellest eemaldudes kahanevad järk-järgult külgmiste väliste veeriste abil. Tänu sellele toimub nurkade ümardamise imitatsioon.

See meetod on halb, kuna kood on risustatud täiendavad plokid, kuid kahjuks on paljudes näidetes sellised plokid olemas. Teine miinus on see, millal suured raadiusedümardamisel peate lisama veelgi rohkem plokke, kui näites on kasutatud.

HTML ja CSS näide: nurkade ümardamine ilma pilte kasutamata

Blokeeri sisu.

Näite kirjeldus

1. Plokis klass = "block" märgime põhisisu elemendi ("content_block"), mille ette asetame nurkade ümardamise simuleerimiseks plokid ("b1" , "b2" , "b3" ). Pärast seda panime need samaks, kuid vastupidises järjekorras.
2. Nurkade välimuse loomiseks seadsime simulatsiooniplokid vajalikule kõrgusele ja külgveeristele (CSS). Samuti lähtestasime nende fondi suuruse (CSS) ja määrame selle väärtuseks :hidden – see on mõeldud vanematele brauseritele, mis võivad suurendada kõrgust ja muuta selle määratust suuremaks.
3. Selles näites lisati lisaks nurkade ümardamisele ka raami imitatsioon. Kui te seda ei vaja, eemaldage lihtsalt elementidelt kõik "äärised" ja eemaldage plokist "b3". taustavärv.

Lihtsaim viis ümarate nurkade kuvamiseks CSS-is on kasutada elemendi taustana pilti. Sel juhul määratakse elemendi mõõtmed tavaliselt samadeks kui taustpildi suurus. Selle meetodi puuduseks on see, et elemendi sisu ei tohiks ulatuda väljapoole selle ulatust, see tähendab, et see peaks olema teatud piiratud suurusega.

HTML-i ja CSS-i näide: nurkade ümardamine ühe pildi abil

MENÜÜ

Näite kirjeldus

1. CSS-i atribuuti kasutades määrame plokile taustapildi, mida keelame vertikaalselt ja horisontaalselt paljundada (no-repeat), kuna antud juhul seda ei nõuta.
2. Selleks, et ploki sees olev tekst selle servi ei puudutaks, määrasime selle polsterduse (CSS) mõlemal küljel 5 pikslit.
3. Järgmisena peate määrama ploki taustaga samadele mõõtmetele. Meie taustpildi mõõtmed on 140x32 pikslit, kuid me määrame ploki enda laiuse ( CSS ) ja kõrguse ( CSS ), vähendatuna 10 piksli võrra. Pidin seda vähendama nende samade sisemiste polsterduste tõttu, mis samuti laiendavad elementi igas suunas 5 piksli võrra.

Eelmises näites oli ploki suurus fikseeritud ja sõltus taustpildi suurusest ning see on väga ebamugav. Nüüd muudame oma ploki laiuse suurust muudetavaks. Selleks lõigake pildist välja kolm osa - küljed ja tükk keskelt. Seejärel asetame põhiploki sisse kaks elementi fikseeritud suurused, mis tänu absoluutsele positsioneerimisele asetatakse selle külgedele. Anname neile samad külgmised osad nagu taust ja keskosa põhiploki jaoks. See annab meile ümarate nurkade ja muutuva laiusega ploki.

Seda tehnikat kasutatakse väga sageli üherealiste elementide, näiteks linkide või jaotiste/menüüpealkirjade ümardamiseks.

HTML ja CSS näide: nurkade ümardamine külgplokkide abil

Peamine sisu.

Näite kirjeldus

1. Plokiklass = "block" paigutame kaks elementi - "left_bok" ja "right_bok", millele seame taustaks (CSS) külgmiste osade pildid ja keelame nende taasesitamise (no-repeat). Põhiploki enda jaoks määrame tausta keskosast ja lubame seda dubleerida ainult horisontaalselt (repeat-x).
2. Täpsustame külgplokkide laiuse vastavalt tausta suurusele, meie jaoks on see 14x32 pikslit. Kuid põhiploki jaoks, nagu ka eelmises näites, määrasime vertikaalse polsterduse kompenseerimiseks kõrguseks 22 pikslit.
3. Positsioneerime oma külgseinad "ploki" suhtes, seega määrame selle jaoks :relative ja külgseinte endi jaoks absoluutse. Noh, siis vajutame need CSS-i atribuutide abil vanema vastavatele külgedele ja .
4. Selleks, et ploki sisu ei jääks külgpiltide alla peitu, määrasime “ploki” küljepolsterduse (CSS), mis võib olla külgede endaga võrdne või veidi suurem. Samuti paneme üla- ja alaserva väikesed veerised, et tekst ei jääks äärte külge.

IE6-s on selle meetodiga väike viga:

Kui “ploki” laius või kõrgus on paaritu, siis tekib ploki siseserva ja parempoolse küljeriba vahele ebameeldiv 1 piksli suurune taane, mis rikub kogu pildi. Seda viga saab parandada kasutades CSS-i häkkimine teatud väljendiga, kuid ma isegi ei anna siin sellist näidet, kuna see külmutab sageli brauseri ja parem on seda mitte kasutada.

Teeme teisiti. Seadke "right_bok" vasaku veerise (CSS) väärtuseks 100%, nii et see liiguks põhiploki paremast servast kaugemale, ja seejärel tagastame selle tagasi, liigutades seda vasakule pikslite arvu võrra, mis on võrdne selle laiusega. IE6 töötab nende omaduste väärtustega õigesti, nii et tal ei jää muud üle, kui paigutada plokk sinna, kus seda vajame.

See nurkade ümardamise meetod on sarnane eelmisele, kuid erinevalt sellest ei paigutata siin külgedele mitte HTML-i elemente, vaid põhiplokki lisatavaid elemente. pseudoelemendid. Tänu sellele lähenemisele oli võimalik vabaneda lehe mittevajalikust HTML-koodist.

HTML ja CSS näide: nurkade ümardamine külgmiste pseudoelementide abil

Peamine sisu.

Näite kirjeldus

1. CSS-i pseudoelemente kasutades anname märku, et tahame põhiploki algusesse ja lõppu midagi lisada. Ja kasutades CSS-i atribuuti, lisame lihtsalt vajalikud pildid ümaratest nurkadest või pigem külgedest. Nii lõime piltidega kaks pseudoelementi.
2. No siis teeme täpselt sama asja nagu eelmises näites, ainult et töötame loodud pseudoelementidega.

IE6 ja IE7 puhul kasutati selles näites järgmisi "karkusid".

1. Nagu teate, ei saa IE6 ja IE7 siin kasutatavatest pseudoelementidest aru, seega teeme järgmist. Kasutame väljendit, mis integreerib põhielemendi sisse kaks silti ja anname neile samad stiilid nagu eelmises näites. Pange tähele, et sisestatud kood, mis tuleb pärast esimest sisemist HTML-i, lisatakse kohe pärast avamist "blokeeri" ja pärast teist sisemist HTML-i lisatakse see enne sulgevat märgendit. Jah, meie puhul pole sellel tähtsust, kuna kasutatakse absoluutset positsioneerimist, kuid mõnikord on kasulik sellest teada.
2. Et seda koodi ei näeks teised brauserid, lisame selle sisse tingimuslikud kommentaarid. Parem oleks panna see eraldi CSS-faili, mis on ühendatud samade kommentaaridega suletud sildiga.

Ümardatud nurgad CSS-is plokimähise abil

Selle meetodi olemus seisneb selles, et kõigepealt lõigatakse pildi nurgad välja. Seejärel asetatakse põhiploki sisse veel mitu plokki (vastavalt nurkade arvule), mis pesatakse üksteise sisse. Igaühele neist antakse taustaks üks pildinurk. Piltide reprodutseerimine on keelatud ja koordinaadid on antud nii, et need asuvad plokkide nurkades. Nii saadakse ümarate nurkade efekt.

HTML-i ja CSS-i näide: nurkade ümardamine plokimähise abil

Blokeeri sisu.

Näite kirjeldus

1. Põhiploki sisse asetame veel neli. Kuna ühelgi neist plokkidest pole veerisid ega ääriseid ning ainult kõige sisemisel on taanded, on need kõik võrdse kõrguse ja laiusega.
2. CSS-i atribuuti kasutades seame iga sisemise ploki taustaks nurka, keelame nende taasesitamise ja asetame need plokkide nurkadesse. Ja kuna elementide taustavärv on läbipaistev, on lehel näha kõik neli taustanurka.
3. Lisage see ise väline üksus soovitud taustavärvi nurgaga. Kõik on valmis.

Ploki laiuse saate selgesõnaliselt määrata, määrates soovitud omaduse lahtris class="block", kuid kõrguse muutmiseks tuleb kasutada sisemist elementi (meie jaoks on see "rb").

Ümardatud nurgad CSS-is positsioneerimise abil

Ka siin lõigatakse tausta jaoks välja nurgad, mis märgitakse väikestele plokkidele. CSS-i absoluutset positsioneerimist kasutades paigutatakse need plokid antud põhielemendi nurkadesse soovitud värvi taustal.

HTML ja CSS näide: nurkade ümardamine positsioneerimise abil

Blokeeri sisu.

Näite kirjeldus

1. Põhielemendi sisse (class= "block") asetame neli silti klassidega "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , mis toimivad nurgaplokkidena.
2. CSS-i atribuuti kasutades ühendame iga nurgaplokiga oma taustapildi ja anname neile laiuse ja kõrguse, mis on sama suurusega taustapildid. Igaks juhuks lähtestame fondi suuruse (CSS) ja kärbime üleliigse (CSS) maha.
3. Määrame põhielemendi suhtelise positsioneerimise (CSS: suhteline), kuna positsioneerime nurgaplokid selle suhtes ja nurkade endi jaoks - absoluutne (absoluutne).
4. Kasutades CSS-i atribuute , ja , määrame nurgaplokkidele vertikaalsed ja horisontaalsed nihkekaugused nii, et need paikneksid põhiploki nurkades.

IE6-s on selle meetodiga paar probleemi:

1. Kui "ploki" laiust pole selgesõnaliselt määratud, siis vasakpoolsed nurgad ei lange paika. Selle põhjuseks on sisemise polsterduse olemasolu plokis. Lihtsaim viis probleemi lahendamiseks on eemaldada taane ja lisada "ploki" põhisisu (ilma nurkadeta) täiendavasse plokiümbrisesse ning seejärel määrata ümbrises vajalik taane. Kuid ma tegin seda siin teisiti, lubades paigutuse atribuudi zoom:1 abil, mis käsib IE6-l kuvada elementi selle loomulikus suuruses. See atribuut on kehtetu, nii et kui otsustate seda kasutada, soovitan teil luua ühenduse kaudu tingimuslikud kommentaarid.
2. Sama ühe piksli viga, millest oli juttu eespool. Kuid siin võivad lüngad tekkida mitte ainult parempoolsete nurkade ja parem pool plokk, aga ka allpool. Ja kui saime parempoolsetest vahedest lahti, siis alumiste puhul see ei tööta. Lahenduseks on selgesõnaliselt määrata põhielemendi ühtlane laius ja kõrgus. Saate määrata ka paarituid väärtusi, kuid siis peate allapoole ja paremale nihke kaugusteks määrama mitte nulli, vaid -1 pikslit.

Põhimõtteliselt on selle CSS-i nurkade ümardamise meetodi tehnoloogia sama, mis eelmises, seega jäetakse siin üksikasjalikud kommentaarid välja. Ainus erinevus seisneb selles, et eraldi tausta nurgapiltide asemel kasutatakse siin ühte ühist spraiti pilti. Tänu sellele laaditakse sait kiiremini, kuna üks pilt “kaalab” vähem kui neli ja hostimine nelja asemel on üks pöördumine.

Sprite on pilt, mis ühendab mitu pilti, mida kasutatakse veebisaidi elementide taustana. See, milline spraiti osa saab konkreetse HTML-elemendi taustaks, sõltub CSS-i spetsiaalses atribuudis määratud koordinaatidest.

HTML-i ja CSS-i näide: nurkade ümardamine positsioneerimise ja spraitide abil

Blokeeri sisu.

Näite kirjeldus

1. Kasutades CSS-i omadust, ühendame nurgaplokkidega taustapildi, mis on ümara kujuga mõõtmetega 22x22 pikslit (11x11 pikslit iga veerandnurga kohta).
2. CSS-i atribuuti kasutades määrame taustanihke koordinaadid. Näiteks väärtus –11 pikslit 0 tähendab, et taust nihutatakse X-teljel vasakule 11 piksli võrra, kuid Y-teljel nihutatakse mitte. Seega väljub spraidi vasak pool elemendi piirist ja jääb alles vaid parempoolne. Kuid see on ainult pooleldi nähtav, kuna selle kõrgus on 22 pikslit ja nurgaploki enda kõrgus on ainult 11 pikslit. Nii selgub, et millal antud väärtus Elemendi taust on spraiti ülemine parem veerand.

IE6-ga on samad probleemid, mis eelmises näites.

Selles näites ümardame äärisega elemendi nurgad, kuid see ei ole selle konkreetse meetodi eripära - eelmistes näidetes saate hõlpsasti kasutada äärisega ümardamist.

Ümardamised teeme ise põhiplokist loodud pseudoelementide abil, kuid ilma neile positsioneerimist rakendamata.

Ja veel üks asi. Eelmistes näidetes lõigati nurgad välja koos sees oleva taustaga ja see pole alati vajalik, eriti kui eeldatakse, et ümarate nurkadega ploki taust on ebaühtlane. Seetõttu muudeti siin raami sees olev taust läbipaistvaks (see võimaldab PNG-vormingus) ja kui nurgad välja lõigati, osutus ka nende sisemus läbipaistvaks. Vajadusel saate kasutada ka eelmistes näidetes sarnast lähenemist.

HTML ja CSS näide: nurkade ümardamine pseudoelementide abil

Blokeeri sisu.

taustal ja selle abil paigutame need sisse parem pool ja me keelame "paljundamise". See on kõik, nurgad on valmis.

Kuna määrasime polsterduse “ploki” (CSS) jaoks, ei asu pseudoelemendid ja seega ka nurgad ploki nurkades, vaid on servadest 15 piksli kaugusel. Selle parandamiseks anname pseudoelementidele vajalikele külgedele negatiivsed veerised (CSS), et paigutada need taande kohale. Aga teeme veerised võrdseks mitte 15, vaid 17px, see on vajalik kaadri (CSS) katmiseks, mille laius on 2px (15+2=17). See on nüüd kõik.

IE6 ja IE7 jaoks kasutasime siin HTML-koodi sisestamisel juba tuttavaid "karkusid", kuna need brauserid ei mõista siin kasutatavaid pseudoelemente:

1. Avaldise abil integreerime põhielemendi sisse kaks silti, mille teisendame ka plokkideks. Seejärel asetame neisse ühe sildi. Ja siis on neil siltidel samad omadused nagu pseudoelementidel. Ainus asi on see, et lisame täiendavalt CSS-i atribuudi :relative, ilma milleta raam kattub nurkadega.

Selle meetodi puuduseks on see, et ümarate nurkadega ploki kõrgust ei saa selgesõnaliselt määrata, sest kui see ületab sisu suurust, siis alumised nurgad ei suruta vastu servi. Seda saab vältida, kui lülitate põhisisu siiski teise plokki ja määrate selle kõrguse.

Veel üks näide nurkade ümardamisest pseudoelementidega ja ilma lisaplokkideta

See näide on sarnane eelmisele, kuid siin kasutame pseudoelementide korrastamiseks positsioneerimist. Tänu sellele lähenemisele sai võimalikuks ümarate nurkadega ploki kõrguse selgesõnaline määramine.

HTML-i ja CSS-i näide: Nurkade ümardamine, kus saate ploki kõrgust muuta

Blokeeri sisu.

Ja jällegi IE6 ja IE7 jaoks lisame mitu lisaelemendid avaldise kasutamine ja koodi sulgemine tingimuslikes kommentaarides. Ainult seekord me isegi ei proovi pseudoelemente jäljendada, vaid teeme seda lihtsamalt.

1. Lisame “ploki” sisse neli silti ja rakendame neile positsioneerimist. Ja siis näitame neile lihtsalt pildinurki taustana ja asetame need põhielemendi nurkadesse. See tähendab, et me teeme täpselt sama, mis ühes ülalpool käsitletud meetoditest.
2. Ühe piksli veast (mida eespool mainiti korduvalt) vabanemiseks lisage parema nurga elementidele vasak veeris (CSS), mille väärtus on 100% ja negatiivne nihe, mis on võrdne -9 piksliga. Üldiselt, kui mäletate, peaks see nihe olema võrdne nurgaploki laiusega (meie jaoks on see 11 pikslit), kuid ärge unustage 2 piksli piiri, mis meil siin on - peame nurgad selle peale panema. (11px-2px=9px).

Muide, tegelikult oleks lihtsam emuleerida pseudoelemente, nagu tegime eelmises näites – nii oleks lisakoodi vähem. Kuid mitte IE6-s, see brauser vajaks veel mitut karku ja selle tulemusena peaks kirjutama kaks eraldi tingimuslikud kommentaarid- IE6 ja IE7 jaoks ning see ainult ajab koodi üles...

Firefoxis töötab see meetod õigesti alates versioonist 3.6 ja Operas - alates versioonist 10.0, ma ei mõelnud nende jaoks karkusid välja, kuna see pole eriti oluline.

Eelmises tunnis õppisime elemendile äärise seadmist. Vaatasime ka selliseid atribuute nagu border-color ja border-style , mille abil saate äärise värvi ja stiili kohandada. Kõik meie raamid tulid aga täisnurksega välja. Nüüd näitame teile, kuidas luua CSS-is ääriste jaoks ümaraid nurki.

Nurkade ümardamine: CSS3 piiriraadiuse atribuut

Nurkade ümardamist CSS-is saab teha mis tahes HTML-lehe elemendi jaoks. Selleks peate sellele rakendama atribuudi border-radius vastava väärtusega. Enamasti määratakse väärtus pikslites, kuid kasutada võib ka muid ühikuid, näiteks em või protsent (viimasel juhul toimub arvutus ploki laiuse suhtes).

Mõju sellest kinnisvarast on märgatav ainult siis, kui kujundataval elemendil on värviline taust ja/või ääris. Näiteks:

BorderElement (taustavärv: #EEDDFF; ääris: 6px ühtlane #7922CC; äärise raadius: 25px; )

Ülalkirjeldatud stiil annab elemendile järgmise tulemuse

suurus 200x200 pikslit:

Samuti saate teha ümardatud servad ainult elemendi ülemise või alumise nurga jaoks või anda igale nurgale erinev ümardusraadius – palju ruumi kujutlusvõimele! Näide:

BorderElement ( taustavärv: #EEDDFF; ääris: 6px pidev #7922CC; äärise raadius: 25px; ) .borderElement1 ( taustavärv: #FFE8DB; ääris: 6px ühtlane #FF5A00; äärise raadius: 15px 100px 15px; 100px)

Kuid see pole veel kõik: lihtsate ümarate nurkade asemel saate määrata elliptilise ümarduse. Selleks peate määrama kaks väärtust, mis on eraldatud kaldkriipsuga (ellipsi horisontaalse ja vertikaalse pooltelje jaoks). Toome näite 150x450 piksli suuruse ploki kohta:

BorderElement (taustavärv: #EEDDFF; ääris: 6px pidev #7922CC; äärise raadius: 280px/100px; )

Saate väärtusi segada (st kasutada nii tavalist kui ka elliptilist ümardamist samas stiilis) ning igale nurgale saate lisada ka isikliku stiili, kasutades sobivaid omadusi:

• border-top-left-radius - vasakpoolse ülanurga jaoks;
• border-top-right-radius – parema ülanurga jaoks;
• border-bottom-left-radius - vasakpoolse alanurga jaoks;
• border-bottom-right-radius – parema alanurga jaoks.

Nurkade ümardamise põhimõte

Alloleval pildil on näha, kuidas CSS-is nurga ümardamist arvutatakse. Seega, kui nurga jaoks on määratud üks väärtus – näiteks 20 pikslit –, tähendab see, et ümardamine toimub piki ringi, mille raadius on 20 pikslit. Kui kaks väärtust on eraldatud kaldkriipsuga, näiteks 30px/20px , ümardatakse nurgad piki ellipsit. Esimene väärtus on sel juhul ellipsi horisontaalse pooltelje pikkus - 30 pikslit ja teine ​​väärtus on vertikaalse pooltelje pikkus - 20 pikslit:

Kinnisvara CSS-i piiriraadius toetavad kõik kaasaegsed versioonid brauserid.