Div i rrumbullakosur. Qoshet e rrumbullakosura duke përdorur CSS

Ju gjithashtu mund të bëni skaje të rrumbullakosura vetëm për qoshet e sipërme ose të poshtme të elementit, ose t'i jepni çdo cepi një rreze të ndryshme rrumbullakimi - shumë kreativitet! Shembull:

BorderElement (ngjyra e sfondit: #EEDDFF; kufiri: 6 px solid # 7922CC; kufiri-rreze: 25 px;) .borderElement1 (ngjyra e sfondit: # FFE8DB; kufiri: 6 px solid # FF5A00; rreze-kufi: 15px 10px 100px)

Por kjo nuk është e gjitha: në vend të qosheve të thjeshta të rrumbullakëta, mund të specifikoni një fileto eliptike. Për ta bërë këtë, duhet të specifikoni dy vlera të ndara me një prerje (për gjysmëboshtet horizontale dhe vertikale të elipsës). Këtu është një shembull në një bllok 150 × 450 pixel:

BorderElement (ngjyra e sfondit: #EEDDFF; kufiri: 6 px solid # 7922CC; rreze-kufi: 280 px / 100 px;)

Vlerat mund të përzihen (d.m.th., mund të përdorni rrumbullakim të rregullt dhe eliptik në të njëjtin stil), dhe gjithashtu mund të shtoni një stil personal për çdo cep duke përdorur vetitë përkatëse:

• kufiri-lart-majtë-rrezja - për këndin e sipërm majtas;
• kufiri-lart-djathtas-rreze - për këndin e sipërm djathtas;
• kufiri-poshtë-majtas-rreze - për këndin e poshtëm të majtë;
• kufiri-poshtë-djathtas-rreze - për këndin e poshtëm djathtas.

Parimi i rrumbullakimit të këndit

Imazhi më poshtë tregon se si llogaritet rrumbullakimi i këndit në CSS. Pra, nëse një vlerë e vetme është specifikuar për këndin - për shembull, 20 px - kjo do të thotë që rrumbullakimi do të ndodhë përgjatë një rrethi me një rreze prej 20 pikselësh. Në rastin kur dy vlera vendosen të ndara nga një prerje, për shembull, 30px / 20px, qoshet do të rrumbullakosen përgjatë një elipsi. Vlera e parë në këtë rast është gjatësia e gjysmëboshtit horizontal të elipsit - 30 px, dhe e dyta - gjatësia e gjysmëboshtit vertikal - 20 px:

Vetia e rrezes kufitare CSS mbështetet nga të gjitha versionet moderne të shfletuesve.

Qoshet tradicionale drejtkëndëshe në hartimin e faqeve të internetit janë të mërzitshme për një kohë të gjatë. Në modë janë këndet e rrumbullakosura, të cilat nuk bëhen duke përdorur imazhe, por përmes stileve, për të cilat përdoret vetia kufi-rreze. Kjo veti mund të ketë një, dy, tre ose katër vlera të ndara nga një hapësirë, të cilat përcaktojnë rrezen e të gjitha qosheve ose secilit veç e veç.

Tabela 1 tregon një numër të ndryshëm vlerash dhe llojin e bllokut që merret në këtë rast.

Kodi	Përshkrim	Pamje
div (rrezja e kufirit: 10 px;)	Rrezja e rrumbullakosjes për të gjitha qoshet menjëherë.
div (rrezja e kufirit: 0 10 px;)	Vlera e parë përcakton rrezen e këndeve lart majtas dhe poshtë djathtas, vlera e dytë vendos këndet lart djathtas dhe poshtë majtas.
div (rrezja e kufirit: 20px 10px 0;)	Vlera e parë specifikon rrezen e këndit të sipërm të majtë, e dyta - njëkohësisht e sipërme e djathta dhe e majta e poshtme, dhe vlera e tretë - e djathta e poshtme.
div (rrezja e kufirit: 20px 10px 5px 0;)	Vendos në mënyrë sekuenciale rrezen e këndit të sipërm majtas, këndit lart-djathtas, këndit poshtë-djathtas dhe këndit poshtë-majtas.

Shembulli 1 tregon krijimin e një blloku me qoshe të rrumbullakosura.

Shembull 1. Këndet në bllok

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Bllok me qoshe të rrumbullakosura

Një efekt interesant mund të merret duke vendosur rrezen e rrumbullakosjes në më shumë se gjysmën e lartësisë dhe gjerësisë së elementit. Në këtë rast, ju merrni një rreth. Shembulli 2 tregon se si të krijoni një buton rrethor me një grafik.

Shembull 2. Butoni i rrumbullakët

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 2.

Oriz. 2. Butoni i rrumbullakët

Në shfletuesin Opera, rrumbullakimi në zbatohet gabimisht nëse kufiri nuk është vendosur nëpërmjet pronës kufitare.

Vetia e rrezes kufitare mund të kombinohet me veti të tjera, si p.sh. shtimi i një hije në një element. Në shembullin 3, bëhet një grup rrathësh, nga të cilët njëri është theksuar me një hije kuti. Ky grup mund të përdoret për të lundruar nëpër faqe ose foto.

Shembulli 3. Shkëlqim

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 3.

Oriz. 3. Shkëlqim rreth rrethit

Me ndihmën e rrezes kufitare, mund të bëni jo vetëm një rreth, por edhe një elips, si dhe një rrumbullakim eliptik të një blloku. Për ta bërë këtë, ju duhet të shkruani jo një vlerë, por dy përmes një prerje. Shkrimi 20px / 10px do të thotë që rrezja horizontale e raundit do të jetë 20 piksele, dhe rrezja vertikale është 10 piksele. Shembulli 4 tregon se si të krijohen qoshe eliptike për të shtuar tekst të stilit komik në një foto.

Shembulli 4. Elipset

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Ju jeni mësuesi juaj

Rezultati i këtij shembulli është paraqitur në Fig. 4.

Oriz. 4. Përdorimi i qosheve eliptike

Ju gjithashtu mund të ndryshoni pamjen e qosheve në imazhe duke shtuar një veçori të rrezes kufitare në përzgjedhësin img, siç tregohet në shembullin 5.

Shembulli 5. Imazhet

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Qoshe të rrumbullakosura në CSS mund të bëhet në shumë mënyra, në shumë mënyra, disa prej të cilave mund të konsiderohen të vjetëruara, pasi CSS 3 prezanton veti të reja që ju lejojnë të rrumbullakosni cepat e elementeve HTML. Sidoqoftë, së pari, shfletuesit e vjetër nuk i mbështesin këto veti, dhe së dyti, ide të tilla ndonjëherë lindin në trurin krijues të një projektuesi që vetëm metodat e vjetra i shpëtojnë. Prandaj, këtu do të shikojmë disa opsione të ndryshme se si të stiloni qoshet e rrumbullakosura në CSS, nga më të thjeshtat tek më komplekset.

Në këta shembuj, qoshet janë të rrumbullakosura në elementët fillimisht të bllokut, dhe në disa shembuj këto blloqe përdoren si elementë ndihmës. Por mbani mend se mund të bëni lehtësisht të njëjtën gjë me elementët e nivelit të linjës duke i vendosur ato paraprakisht me një vlerë blloku ose blloku inline nëse është e nevojshme.

Qoshe të rrumbullakosura në CSS 3 pa imazhe

Ky shembull përdor vetitë CSS 3 për ta bërë të lehtë rrumbullakimin e qosheve pa pasur nevojë për imazhe.

Shembull HTML dhe CSS: Rrumbullakimi i qosheve me CSS 3 pa imazhe

Blloko përmbajtjen.

Përshkrimi i shembullit

1. Për të rrumbullakosur qoshet, ne përdorim veçorinë CSS 3 që e kuptojnë të gjithë shfletuesit modernë.
2. Për shfletuesit më të vjetër Firefox, Chrome dhe Safari, ne aplikojmë veçori të veçanta me prefikset -moz- dhe -webkit-, të cilat ata i kishin përpara se të mbështetej vetia kryesore. Fatkeqësisht, nuk ka analoge të ngjashme për Opera të vjetër dhe IE. Vini re se kur krijoni fileto komplekse, vetitë e paracaktuara mund të mos funksionojnë siç duhet. Kjo është arsyeja pse në kodin CSS ato janë specifikuar më lart se vetia kryesore, në mënyrë që sipas prioritetet e stilit, shfletuesit që tashmë e kuptojnë "pastër" e kanë përdorur atë.

Karakteristikat e prefiksuara mungojnë në specifikimin CSS, kështu që përdorimi i tyre do të rezultojë në kod të pavlefshëm.

Qoshe të rrumbullakosura në CSS pa imazhe

As në këtë shembull nuk ka imazhe, por përdoren blloqe shtesë. Thelbi i metodës është që para dhe pas përmbajtjes kryesore, tregohen disa blloqe, të cilat, ndërsa largohen prej saj, gradualisht ulen në gjerësi duke përdorur kufijtë e jashtëm anësor. Falë kësaj, ndodh një imitim i rrumbullakimit të qosheve.

Kjo metodë është e keqe sepse kodi është "i mbushur" me blloqe shtesë, por, për fat të keq, në shumë shembuj, blloqe të tilla do të jenë të pranishme. Një tjetër disavantazh - me rreze të mëdha lakimi, do t'ju duhet të shtoni edhe më shumë blloqe sesa përdoren në shembull.

Shembull HTML dhe CSS: rrumbullakimi i qosheve pa përdorur imazhe

Blloko përmbajtjen.

Përshkrimi i shembullit

1. Brenda bllokut me class = "block" ne specifikojmë një element për përmbajtjen kryesore ("content_block") përpara të cilit vendosim blloqe për të simuluar rrumbullakimin e qosheve ("b1", "b2", "b3"). Pas saj i vendosim në të njëjtin rend, por në rend të kundërt.
2. Jepni blloqeve të simulojnë lartësinë e kërkuar dhe kufijtë anësore (CSS) për të krijuar pamjen e qosheve. Ne gjithashtu rivendosim madhësinë e tyre të shkronjave (CSS) dhe vendosim: i fshehur - kjo është menduar për shfletuesit më të vjetër që mund të rrisin lartësinë dhe ta bëjnë atë më të madh se ai i specifikuar.
3. Në këtë shembull, përveç rrumbullakimit të qosheve, u shtua edhe një imitim i një kornize, nëse nuk ju nevojitet, atëherë thjesht hiqni të gjitha "kufijtë" nga elementët dhe hiqni ngjyrën e sfondit nga blloku "b3".

Mënyra më e lehtë për të shfaqur qoshet e rrumbullakosura në CSS është të përdorni një imazh si sfond për një element. Në këtë rast, dimensionet e elementit zakonisht tregohen të njëjta me madhësinë e imazhit të sfondit. Disavantazhi i kësaj metode është se përmbajtja e elementit nuk duhet të shkojë përtej kufijve të tij, domethënë duhet të jetë me një madhësi të caktuar të kufizuar.

Shembull HTML dhe CSS: Rrumbullakimi i qosheve duke përdorur një imazh të vetëm

MENU

Përshkrimi i shembullit

1. Duke përdorur veçorinë CSS, vendosni një imazh të sfondit për bllokun, i cili ndalohet të shumëzohet vertikalisht dhe horizontalisht (pa përsëritje), pasi në këtë rast nuk kërkohet.
2. Për të parandaluar ngjitjen e tekstit brenda bllokut në skajet e tij, vendosni mbushjen e tij të brendshme (CSS) në 5 px në secilën anë.
3. Më pas, duhet të vendosni bllokun në të njëjtat dimensione si sfondi. Imazhi ynë i sfondit ka dimensione 140x32 piksele, por ne specifikojmë gjerësinë (CSS) dhe lartësinë (CSS) për vetë bllokun, duke u ulur me 10 pikselë. Më duhej ta zvogëloja për shkak të mbushjes shumë të brendshme, e cila gjithashtu zgjeron elementin me 5 px në çdo drejtim.

Në shembullin e mëparshëm, madhësia e bllokut ishte fikse dhe varej nga madhësia e imazhit të sfondit, gjë që është shumë e papërshtatshme. Tani do ta bëjmë atë në mënyrë që gjerësia e bllokut tonë të jetë e ridimensionueshme. Për ta bërë këtë, prerë tre pjesë të imazhit - anët dhe një pjesë të qendrës. Më pas do të vendosim dy elementë me përmasa fikse brenda bllokut kryesor, të cilët për shkak të pozicionimit absolut do t'i vendosim në faqet e tij. Ne do të vendosim të njëjtat pjesë anësore për sfondin, dhe pjesën qendrore për bllokun kryesor. Kjo do të krijojë një bllok me qoshe të rrumbullakosura dhe një gjerësi të ndryshueshme.

Kjo teknikë përdoret shumë shpesh për të rrumbullakosur artikujt me një rresht të tillë si lidhjet ose titujt e seksioneve / menysë.

Shembull HTML dhe CSS: Rrumbullakimi i këndeve duke përdorur blloqe anësore

Përmbajtja kryesore.

Përshkrimi i shembullit

1. Brenda bllokut class = "block" vendosim dy elemente - "left_bok" dhe "right_bok", të cilat i vendosim si imazhe të sfondit (CSS) të pjesëve anësore dhe ndalojmë riprodhimin e tyre (pa përsëritje). Për bllokun kryesor, ne vendosim sfondin nga pjesa qendrore dhe e lejojmë atë të dyfishohet vetëm horizontalisht (përsërit-x).
2. Specifikoni gjerësinë për blloqet anësore që korrespondojnë me madhësinë e sfondit, për ne është 14x32 piksele. Por për bllokun kryesor, si në shembullin e mëparshëm, vendosni lartësinë në 22 px për të kompensuar mbushjen vertikale.
3. Ne do t'i pozicionojmë anët tona në lidhje me "bllokun", kështu që ne specifikojmë për të: relative, dhe për vetë anët - absolute. Epo, atëherë ne i shtypim ato në anët përkatëse të prindit duke përdorur vetitë CSS, dhe.
4. Për të parandaluar që përmbajtja e bllokut të fshihet nën fotot anësore, vendosni mbushjen anësore të "bllokut" (CSS), e cila mund të jetë e barabartë ose pak më e madhe se vetë anët. Gjithashtu vendosim margjina të vogla në pjesën e sipërme dhe të poshtme në mënyrë që teksti të mos "ngjitet" në skajet.

IE6 ka një gabim të vogël me këtë metodë:

Nëse gjerësia ose lartësia e "bllokut" është e çuditshme, atëherë do të shfaqet një diferencë e pakëndshme prej 1 px midis skajit të brendshëm të bllokut dhe anës së pozicionuar djathtas, gjë që do të prishë të gjithë pamjen. Ky gabim mund të rregullohet duke përdorur Hakimi CSS me një shprehje të caktuar, por nuk do të jap as një shembull të tillë këtu, pasi shpesh "ngrin" shfletuesin dhe është më mirë të mos e përdorësh.

Le ta bëjmë ndryshe. Le të vendosim "right_bok" margjinën e majtë (CSS) në 100% në mënyrë që të zhvendoset përtej kufirit të djathtë të kutisë kryesore, dhe më pas do ta kthejmë atë, duke e zhvendosur majtas me numrin e pikselëve të barabartë me të. gjerësia. IE6 funksionon saktë me vlerat e këtyre vetive, kështu që nuk ka zgjidhje tjetër veçse ta vendosim bllokun aty ku na nevojitet.

Kjo metodë e rrumbullakimit të qosheve është e ngjashme me atë të mëparshme, por ndryshe nga ajo, këtu nuk vendosen elementë HTML në anët, por shtohen në bllokun kryesor pseudoelemente... Falë kësaj qasjeje, ne arritëm të heqim qafe kodin e panevojshëm HTML të faqes.

Shembull HTML dhe CSS: rrumbullakimi i qosheve duke përdorur pseudo-elemente anësore

Përmbajtja kryesore.

Përshkrimi i shembullit

1. Përdorimi i pseudo-elementeve CSS dhe tregon se duam të shtojmë diçka në fillim dhe në fund të bllokut kryesor. Dhe, duke përdorur veçorinë CSS, ne thjesht shtojmë imazhet e nevojshme të qosheve të rrumbullakosura, ose më mirë të anëve. Kështu krijuam dy pseudo-elemente imazhi.
2. Epo, atëherë ne bëjmë gjithçka saktësisht njësoj si në shembullin e mëparshëm, vetëm ne punojmë me pseudo-elementët e krijuar.

Për IE6 dhe IE7, paterica u përdorën në këtë shembull:

1. Siç e dini, IE6 dhe IE7 nuk i kuptojnë pseudoelementët e përdorur këtu, kështu që ne bëjmë sa më poshtë. Ne përdorim shprehjen, e cila integron dy etiketa brenda elementit kryesor, dhe i kemi vendosur tashmë të njëjtat stile si në shembullin e mëparshëm. Vini re se kodi i injektuar pas innerHTML-së së parë shtohet menjëherë pas etiketës hapëse "blloku", dhe pas etiketës së dytë të brendshme HTML - para etiketës mbyllëse. Po, në rastin tonë nuk ka rëndësi, pasi përdoret pozicionimi absolut, por ndonjëherë është e dobishme të dini për të.
2. Për të parandaluar që ky kod të shihet nga shfletues të tjerë, ne e bashkojmë atë komente të kushtëzuara... Do të ishte më mirë nëse e vendosni edhe në një skedar të veçantë CSS, i cili duhet të përfshihet me një etiketë të mbyllur me të njëjtat komente.

Qoshet e rrumbullakosura në CSS duke përdorur mbështjellësin e bllokut

Thelbi i kësaj metode është që së pari qoshet të priten nga imazhi. Pastaj, disa blloqe të tjera (sipas numrit të qosheve) vendosen brenda bllokut kryesor, të cilët futen në njëra-tjetrën. Secilit prej tyre i jepet një cep imazhi si sfond. Imazhet janë të ndaluara të riprodhohen dhe jepen koordinatat në mënyrë që ato të zënë vende në qoshet e blloqeve. Kjo jep efektin e qosheve të rrumbullakosura.

Shembull HTML dhe CSS: Rrumbullakimi i këndeve duke përdorur mbështjelljen e bllokut

Blloko përmbajtjen.

Përshkrimi i shembullit

1. Ne vendosëm edhe katër të tjera brenda bllokut kryesor. Meqenëse asnjë prej këtyre blloqeve nuk ka kufij ose korniza të vendosura, dhe vetëm blloqet më të brendshme ka margjina, të gjithë rezultojnë të jenë të barabartë në lartësi dhe gjerësi.
2. Duke përdorur veçorinë CSS, vendosni një cep për secilin prej blloqeve të brendshme si sfond, çaktivizoni shumëzimin e tyre dhe vendosini në cepat e blloqeve. Dhe meqenëse ngjyra e sfondit të elementeve është transparente, të katër qoshet e sfondit janë të dukshme në faqe.
3. Shtoni ngjyrën e dëshiruar të sfondit në bllokun më të jashtëm të qoshes. Gjithçka është gati.

Ju mund të vendosni në mënyrë eksplicite gjerësinë e bllokut duke specifikuar vetinë e dëshiruar për klasën = "block", megjithatë, për të ndryshuar lartësinë, duhet të përdorni elementin më të brendshëm (ne kemi "rb").

Qoshet e rrumbullakosura në CSS duke përdorur pozicionimin

Edhe këtu janë prerë qoshet për sfondin, i cili do të tregohet në blloqet e vogla. Duke përdorur pozicionimin absolut CSS, këto kuti vendosen në qoshet e elementit kryesor, të cilit i jepet ngjyra e dëshiruar e sfondit.

Shembull HTML dhe CSS: rrumbullakimi i qosheve duke përdorur pozicionimin

Blloko përmbajtjen.

Përshkrimi i shembullit

1. Brenda elementit kryesor (class = "block") vendosim katër etiketa me klasat "corn_lt", "corn_rt", "corn_lb", "corn_rb", të cilat do të veprojnë si blloqe-këndore.
2. Duke përdorur veçorinë CSS, ne lidhim imazhin tonë të sfondit me çdo bllok qoshe dhe vendosim gjerësinë dhe lartësinë e tij të barabartë në madhësi me këto imazhe të sfondit. Për të qenë në anën e sigurt, rivendosni madhësinë e shkronjave (CSS) dhe shkurtoni tepricën (CSS).
3. Specifikoni pozicionimin relativ për elementin kryesor (CSS: relative), pasi ne do të pozicionojmë blloqet e qosheve në lidhje me të, dhe për vetë qoshet - absolute (absolute).
4. Duke përdorur vetitë CSS, dhe, specifikoni për blloqet e qosheve distancat e zhvendosjes vertikale dhe horizontale në mënyrë që ato të vendosen në qoshet e bllokut kryesor.

IE6 ka disa probleme me këtë mënyrë:

1. Nëse "blloku" nuk e specifikon në mënyrë eksplicite gjerësinë, atëherë qoshet në të majtë nuk do të fiksohen në vend. Kjo është për shkak se blloku ka mbushje. Mënyra më e lehtë për të rregulluar problemin është heqja e dhëmbëzimeve dhe mbyllja e përmbajtjes kryesore të "bllokut" (pa qoshe) në një bllok mbështjellës shtesë dhe specifikimi i dhëmbëzimeve të nevojshme në mbështjellës. Por unë e bëra atë ndryshe këtu duke aktivizuar paraqitjen me veçorinë zmadhuese: 1, e cila i thotë IE6 të japë elementin në madhësinë e tij natyrale. Kjo pronë është e pavlefshme, prandaj, nëse vendosni ta përdorni, atëherë ju rekomandoj të bëni një lidhje nëpërmjet komente të kushtëzuara.
2. I njëjti gabim me një piksel që u diskutua më lart. Por këtu, boshllëqet mund të formohen jo vetëm midis qosheve të djathta dhe anës së djathtë të bllokut, por edhe më poshtë. Dhe nëse heqim qafe boshllëqet në të djathtë, atëherë kjo nuk do të funksionojë me ato të poshtme. Mënyra e daljes është të tregohet në mënyrë eksplicite gjerësia dhe lartësia e barabartë e elementit kryesor. Mund të vendosen edhe vlera tek, por atëherë do të jetë e nevojshme të vendosni distancat e zhvendosjes poshtë dhe djathtas të barabarta jo me zero, por me -1px.

Në fakt, teknologjia për këtë mënyrë të rrumbullakimit të qosheve në CSS është e njëjtë si në atë të mëparshmen, kështu që komentet e detajuara do të hiqen këtu. Dallimi i vetëm është se në vend të imazheve të veçanta të këndit të sfondit, këtu përdoret një imazh i zakonshëm sprite. Falë kësaj, ngarkimi i faqes përshpejtohet, sepse një imazh "peshon" më pak se katër dhe hosting ka një ankim në vend të katër.

Një sprite është një imazh që kombinon disa imazhe njëherësh të përdorura si sfond për elementët e faqes në internet. Cila pjesë e spritit do të jetë sfondi për këtë apo atë element HTML varet nga koordinatat e specifikuara në një pronë të veçantë CSS.

Shembull HTML dhe CSS: rrumbullakimi i qosheve duke përdorur pozicionimin dhe sprites

Blloko përmbajtjen.

Përshkrimi i shembullit

1. Duke përdorur veçorinë CSS, lidhni një imazh sprite të sfondit me blloqet e qosheve, i cili ka një formë të rrumbullakosur me përmasa 22x22 pikselë (11x11 piksele për çdo çerek cep).
2. Duke përdorur veçorinë CSS, ne specifikojmë koordinatat e zhvendosjes së sfondit. Për shembull, një vlerë prej -11px 0 do të thotë që sfondi do të zhvendoset majtas me 11px përgjatë boshtit X, por nuk do të zhvendoset përgjatë boshtit Y. Kështu, gjysma e majtë e spritit shkon përtej kufirit të elementit dhe mbetet vetëm e djathta. Por edhe ajo është vetëm gjysma e dukshme, pasi është 22px e lartë, dhe lartësia e vetë bllokut të qosheve është vetëm 11px. Pra, rezulton se me këtë vlerë, tremujori i sipërm i djathtë i spritit do të bëhet sfondi i elementit.

IE6 ka të njëjtat probleme si në shembullin e mëparshëm.

Në këtë shembull, ne do të rrumbullakojmë qoshet e një elementi që ka një kufi, por kjo nuk është një veçori e kësaj metode të veçantë - mund të përdorni lehtësisht rrumbullakimin me një kufi në shembujt e mëparshëm.

Rrumbullakimin do ta bëjmë duke përdorur pseudoelementët e krijuar në bllokun kryesor, por pa aplikuar pozicionimin e tyre.

Dhe një moment. Në shembujt e mëparshëm, qoshet janë prerë së bashku me sfondin brenda, dhe kjo nuk është gjithmonë e nevojshme, veçanërisht nëse supozohet se sfondi i një blloku me qoshe të rrumbullakosura do të jetë jo uniform. Prandaj, sfondi brenda kornizës këtu u bë transparent (formati PNG e lejon) dhe kur u prenë qoshet, pjesa e brendshme e tyre gjithashtu doli të jetë transparente. Nëse është e nevojshme, mund të përdorni gjithashtu një qasje të ngjashme në shembujt e mëparshëm.

Shembull HTML dhe CSS: rrumbullakimi i qosheve duke përdorur pseudo-elemente

Blloko përmbajtjen.

sfond, dhe me ndihmën e tij i pozicionojmë në anën e djathtë dhe ndalojmë "riprodhimin". Gjithçka, qoshet janë gati.

Meqenëse kemi specifikuar kufijtë e brendshëm (CSS) për "bllokun", pseudo-elementet, dhe në përputhje me rrethanat qoshet, nuk janë të vendosura në qoshet e bllokut, por zhvendosen nga skajet me 15 px. Për ta rregulluar këtë, ne u japim pseudo-elementeve marzhe negative (CSS) në anët e nevojshme për t'i vendosur ato në majë të mbushjes. Por ne i bëjmë kufijtë jo 15, por 17 px, kjo është e nevojshme për të mbuluar kornizën (CSS), gjerësia e së cilës është 2 px (15 + 2 = 17). Tani kjo është e gjitha.

Për IE6 dhe IE7, këtu kemi përdorur "paterica" ​​tashmë të njohura me injeksion HTML, pasi këta shfletues nuk i kuptojnë pseudo-elementët e përdorur këtu:

1. Duke përdorur shprehjen, ai integron dy etiketa në elementin kryesor, të cilin ne gjithashtu i shndërrojmë në blloqe. Pastaj vendosim një etiketë në to. Dhe pastaj këto etiketa kanë të njëjtat veti si pseudo-elementet. E vetmja gjë është që ne shtojmë gjithashtu pronën relative CSS: pa të cilën korniza mbivendos qoshet.

Disavantazhi i kësaj metode është se lartësia nuk mund të vendoset në mënyrë eksplicite për një bllok me qoshe të rrumbullakosura, sepse nëse tejkalon madhësinë e përmbajtjes, atëherë qoshet e poshtme nuk do të përkulen në skajet. Kjo mund të shmanget nëse ende e mbyllni përmbajtjen kryesore në një bllok tjetër dhe vendosni lartësinë në të.

Një shembull tjetër i rrumbullakimit të qosheve me pseudo-elemente dhe pa blloqe shtesë

Ky shembull është i ngjashëm me atë të mëparshëm, por përdor pozicionimin për të rregulluar pseudo-elementet. Falë kësaj qasjeje, u bë e mundur të specifikohej në mënyrë eksplicite lartësia e një blloku me qoshe të rrumbullakosura.

Shembull HTML dhe CSS: rrumbullakimi i qosheve ku mund të ndryshoni lartësinë e bllokut

Blloko përmbajtjen.

Dhe përsëri, për IE6 dhe IE7, ne shtojmë disa elementë shtesë brenda bllokut kryesor duke përdorur shprehjen dhe kodi mbyllet në komente të kushtëzuara. Por këtë herë nuk do të përpiqemi as të imitojmë pseudo-elementë, por do ta bëjmë më lehtë.

1. Shtoni katër etiketa brenda "bllokut" dhe pozicionojini ato. Dhe pastaj ne thjesht i drejtojmë ato në qoshet e imazhit si sfond dhe i vendosim në qoshet e elementit kryesor. Kjo do të thotë, ne veprojmë saktësisht si në një nga metodat e diskutuara më sipër.
2. Për të hequr qafe gabimin me një piksel (i cili u përmend më lart më shumë se një herë), shtoni një diferencë të majtë 100% (CSS) në elementët e këndit të djathtë dhe një kompensim negativ prej -9 px. Në përgjithësi, nëse mbani mend, kjo zhvendosje duhet të jetë e barabartë me gjerësinë e bllokut të qoshes (ne e kemi atë 11 px), por mos harroni për kufirin 2 px që kemi këtu - ne duhet të vendosim qoshet sipër tij (11px -2px = 9px).

Nga rruga, në fakt, do të ishte më e lehtë për të imituar pseudo-elementet, siç bëmë në shembullin e mëparshëm - në këtë mënyrë kodi shtesë do të ishte më i vogël. Por jo në IE6, ky shfletues do të kishte nevojë për disa paterica të tjera dhe, si rezultat, do të duhej të shkruante dy të veçanta komente të kushtëzuara- për IE6 dhe IE7, dhe kjo vetëm do të frynte kodin ...

Në Firefox, kjo metodë ka funksionuar si duhet që nga versioni 3.6, dhe në Opera - që nga versioni 10.0, nuk dola me paterica për ta, pasi ka pak rëndësi.