Kufiri i ngurtë css. Modeli i kutisë CSS

Ne kemi studiuar vetitë për hartimin e tekstit dhe fontit, tani është radha jonë të kalojmë te elementë të tjerë. Në këtë tutorial do të shikojmë krijimin e kornizave duke përdorur CSS. Kjo pronë përdoret mjaft shpesh, kështu që meriton pak më shumë vëmendje.

Dhe kështu, le të supozojmë se duhet të bëni një kornizë rreth ndonjë elementi. Për shembull, le të krijojmë një titull dhe ne do të bëjmë një kornizë rreth tij.

Parametrat që karakterizojnë kornizën: 1) Trashësia e kornizës, 2) Stili i kornizës dhe 3) Ngjyra e kornizës. Dhe le të shkojmë me radhë:

• 1. Trashësia e kornizës: gjerësia e kufirit: 2 px;
• 2. Stili i kornizës: stili i kufirit: të ngurta;
• 3. Ngjyra e kornizës: ngjyra e kufirit: #ff0000;

Në cilat janë stilet e kornizës CSS? Më poshtë janë të gjitha stilet e disponueshme të kornizave:

• me pika - Kjo është një kornizë me pika.
• i thyer - Kjo është një kornizë me pika
• të ngurta - Është një kornizë solide
• dyfishtë - Kjo është një kornizë e dyfishtë
• brazdë - Pamje volumetrike
• kurriz - Pamje volumetrike
• futur - Pamje volumetrike
• fillimi - Pamje volumetrike

Tani kemi gjithçka për të krijuar një kornizë rreth titullit.

HTML

Krijo një kornizë rreth titullit.

Dhe stili për vetë kornizën.

H2 (gjerësia e kufirit: 2 px; stili i kufirit: i fortë; ngjyra e kufirit: #FF0000; )

Si rezultat, një kornizë solide e kuqe me një trashësi prej 2 px.

Korniza është formuar nga katër anët: E sipërme, E drejta, Më e ulët Dhe Majtas dhe, meqenëse ne kemi pronën e specifikuar kufiri , atëherë shfletuesi si parazgjedhje tërheq të katër anët e kornizës. Kështu, nëse duhet të specifikoni një kornizë vetëm në njërën anë, atëherë parashtesat përdoren për të treguar anën ku duhet krijuar korniza.

• krye - Top.
• drejtë - E drejta
• fund - Poshtë
• majtas - Majtas

Kështu, nëse duam të bëjmë një kornizë vetëm në fund të paragrafit, domethënë ta nënvizojmë atë, atëherë për secilën veti kufiri shtoni një parashtesë fund . Rezultati do të jetë struktura e mëposhtme e kodit.

H2( gjerësia e kufirit të poshtëm: 2 px; stili i kufirit të poshtëm: dyfish; ngjyra e skajit të poshtëm: #FF0000; )

Përdorimi i këtyre stileve për shfletuesin do të thotë që ju duhet vetëm të krijoni një kornizë nga fundi, d.m.th. duke theksuar titullin. Ju mund ta kopjoni atë në të njëjtën mënyrë këtë kod, duke vendosur kornizën në anën tjetër, për shembull në pjesën e sipërme.

H2( gjerësia e kufirit të poshtëm: 2 px; stili i kufirit të poshtëm: dyfish; ngjyra e skajit të poshtëm: #FF0000; gjerësia e sipërme e kufirit: 2 px; stili i skajit të sipërm: dyfish; ngjyra e sipërme e kufirit: # FF0000;)

Titulli tani do të ketë një kufi të kuq në krye dhe në fund. E njëjta gjë mund të bëhet edhe për partitë e tjera.

Siç ndoshta e keni vënë re tashmë, regjistrimi doli të ishte mjaft i madh, kështu që ekziston një lloj i shkurtuar regjistrimi që përdoret shpesh në praktikë.

Fotografia e mësipërme tregon strukturën e shënimit të shkurtuar, ku tregohet vetia kufiri dhe si vlera, të ndara me një hapësirë, tregohet gjerësia e kornizës - gjerësia e kufirit , stili i kornizës - të stilit kufitar dhe ngjyra e kornizës - #ff0000 .

Kjo është, shfletuesi, duke parë një hyrje të tillë të shkurtuar kufiri: 2px solid #ff0000; , gjithashtu do të krijojë një kornizë në të katër anët e titullit. Kjo hyrje e shkurtër është ekuivalente me hyrjen që kemi përdorur më sipër (ku janë përdorur tre veti).

Nëse përdorni një shënim të shkurtër, duhet të tregoni kornizën vetëm në njërën anë, atëherë ne i shtojmë veçorisë thjeshtësinë që tregon anën nga e cila krijohet korniza.

H2 (kufitar-lart: 2px solid #ff0000; )

Pra, duke përdorur një shënim të shkurtër, bëhet një kornizë nga lart, ku tregohet edhe trashësia, stili dhe ngjyra e kornizës.

Në këtë mënyrë, duke përdorur pronën kufiri një kornizë është bërë rreth çdo elementi. Ju gjithashtu mund të përdorni kornizën për të krijuar nënvizime për lidhjet kur keni nevojë për një ngjyrë të ndryshme për nënvizimin. Epo, kjo është e gjitha me kornizën, le të kalojmë te tjetra mësim i rëndësishëm, ku do të shqyrtojmë

Në këtë kapitull:

Modeli i bllokut është një mënyrë e shfaqjes së elementeve nga shfletuesit që përpunojnë të gjitha etiketat si blloqe të vogla, për ta çdo etiketë është një kontejner me përmbajtje: tekst, imazhe, etiketa të tjera, etj.

• Marzhi(margin) - hapësirë ​​boshe (diferencë) që ndan një element nga tjetri. Shembulli më i thjeshtë i dhëmbëzimit është hapësira ndërmjet paragrafëve që pasojnë njëri-tjetrin. Zona e margjinës është transparente dhe nuk mund të ketë ngjyrën e saj ose efektet e tjera të dizajnit.
• Kufiri(kufi i elementit) - kufi në çdo anë të elementit. Korniza mund të instalohet në të gjitha anët e elementit, ose në njërën anë. Duke përdorur një kornizë, thjesht mund të dekoroni bukur një element ose të ndani vizualisht përmbajtjen e elementit aktual nga elementët e tjerë në faqe.
• Mbushje(mbushje) - hapësirë ​​boshe midis përmbajtjes së një elementi dhe kufirit të tij. Zona e mbushjes është transparente dhe nuk mund të ketë ngjyrën e saj ose efektet e tjera të dizajnit.
• Shumica e elementeve kanë një zonë përmbajtjeje që përmban gjithçka përmbajtjen element (tekst, imazhe të futura ose elementë të tjerë).

Kornizë

Kufiri është një vijë e thjeshtë që shfaqet rreth elementit që po stiloni. Por nuk është aspak e nevojshme të përdorni një kornizë që rrethon elementin nga të gjitha anët. Mund ta shtoni vetëm nga ana e kërkuar e elementit. Për shembull, nëse shtoni një kufi vetëm në fund të një elementi blloku, ai do të prodhojë të njëjtin efekt si elementi

---

(vije horizontale), duke vepruar si ndarës.

Çdo kornizë ka tre veti që mund t'i kontrollojmë duke përdorur CSS: gjerësia, stili dhe ngjyra. Le të shohim se cilat veçori mund të përdoren për t'i vendosur dhe ndryshuar ato:

Në vend që të specifikoni të tre vetitë, mund të specifikoni vetëm një - veçorinë e kufirit, e cila ju lejon të specifikoni njëkohësisht gjerësinë, stilin dhe ngjyrën për kufirin:

Paragrafi i parë.

Paragrafi i dytë.

Paragrafi i tretë.

Për të kontrolluar kornizën veçmas në secilën anë të elementit, përdorni vetitë e mëposhtme:

• kufiri-top - korniza e sipërme
• kufiri-majtë - korniza e majtë
• kufiri-djathtas - korniza e djathtë
• kufiri-fund - korniza e poshtme

Këto veti funksionojnë saktësisht njësoj si vetia e kufirit, përveç se ato ju lejojnë të kontrolloni kufirin vetëm në njërën anë të elementit që po stiloni.

Kufijtë e jashtëm dhe të brendshëm

dhëmbëzimi- hapësirë ​​bosh midis përmbajtjes së elementit dhe kufirit të tij (nëse është i instaluar). Për të shtuar dhe kontrolluar gjerësinë e mbushjes në të katër anët e një elementi, përdorni veçorinë e mbushjes.

Marzhi është hapësira boshe që ndan një element nga elementët e tjerë ose skajet e dritares së shfletuesit. Për të shtuar dhe kontrolluar gjerësinë e margjinave në të katër anët e një elementi, përdorni veçorinë margin.

Vetitë e mbushjes dhe kufirit mund të marrin nga një deri në katër vlera:

Ku vlerat vendosen në drejtim të akrepave të orës, duke filluar nga lart:

Nëse specifikoni vetëm një vlerë për vetitë, atëherë dhëmbëzimi në të gjitha anët do të jetë me të njëjtën gjerësi.

Në shikim të parë, efekti i dukshëm kur përdorni këto veçori duket i njëjtë; për të vërejtur një ndryshim vizual midis tyre, mund, për shembull, të vendosni një kufi për një element ose grup sfondin:

Paragraf i rregullt.

Për dhëmbëzat, si dhe për kornizat, ka veti që ju lejojnë të kontrolloni madhësinë e dhëmbëzimit në secilën anë veç e veç. Mbushje kontrollohet nga vetitë: mbushje-lart , mbushje-djathtas , mbushje-fund dhe mbushje-majtas . Margjinat kontrollohen nga vetitë e mëposhtme: margjina-lart, margjina-djathtas, margjina-poshtë dhe margjina-majtë.

Shënim: vlerat vetitë e mbushjes dhe marzhi nuk trashëgohet elementet fëmijë, kështu që ju duhet të specifikoni gjerësinë e mbushjes veçmas për çdo element që ka nevojë për të.

Gjerësia dhe lartësia e elementit

E paracaktuar për elementet e bllokut përdoret gjerësia automatike. Kjo do të thotë që elementi do të shtrihet saktësisht aq sa është hapesire e lire. Lartësia e paracaktuar e elementeve të bllokut vendoset automatikisht, d.m.th. shfletuesi shtrin zonën e përmbajtjes në drejtim vertikal në mënyrë që të shfaqet e gjithë përmbajtja. Për të vendosur dimensione të personalizuara për zonën e përmbajtjes së një elementi, mund të përdorni vetitë e gjerësisë dhe lartësia.

Vlad Merzheviç

Duke përdorur CSS, mund të shtoni një kufi në një element në disa mënyra. Në thelb, natyrisht, përdoret prona e kufirit, si më universale, si dhe skicimi dhe, çuditërisht, kuti-hije, detyra kryesore e së cilës është krijimi i një hije. Më tej, ne do t'i shqyrtojmë këto metoda dhe dallimet e tyre midis tyre.

përshkruajë pronën

Vetia më e thjeshtë për krijimin e kornizave. Ka të njëjtat parametra si kufiri, por ndryshon ndjeshëm në disa detaje:

• skica shfaqet rreth elementit (kufiri brenda);
• skica nuk ndikon në dimensionet e elementit (kufiri i shtohet gjerësisë dhe lartësisë së elementit);
• skica mund të vendoset vetëm rreth të gjithë elementit, por jo në anët individuale (kufiri mund të përdoret për çdo anë ose të gjitha menjëherë);
• skica nuk ndikohet nga rrezja e filetos e specifikuar nga vetia kufi-radius (kufiri preket).

Shtrohet pyetja - në cilat raste nevojitet konturi, kur rolin e tij, pavarësisht dallimeve të listuara, e merr tërësisht kufiri? Nuk ka shumë situata, por ato ndodhin:

• krijimi i kornizave komplekse me shumë ngjyra;
• shtimi i një kornize në një element kur kaloni miun mbi të;
• fshehja e kufirit që shfletuesi shton automatikisht në disa elementë kur merr fokusin;
• për skicë, mund të vendosni distancën nga skaji i elementit në kornizë duke përdorur veçorinë outline-offset, për të krijuar .

Korniza me shumë ngjyra

Ju duhet të kuptoni se skica në asnjë mënyrë nuk zëvendëson kufirin dhe mund të ekzistojë lehtësisht së bashku me të, siç tregohet në shembullin 1.

Shembulli 1: Krijimi i një kornize

Në këtë shembull, rreth elementit shtohet një kornizë e zezë, e cila ndahet nga sfondi me një kufi të bardhë (Fig. 1).

Oriz. 1. Kornizë rreth elementit

Korniza kur përdoret: rri pezull

Kur shtoni një kornizë përmes kufirit, gjerësia e elementit rritet, gjë që është mjaft e dukshme kur kombinoni kufirin dhe pseudo-klasën :hover. Ka dy mënyra për ta "fituar" këtë. Gjëja më e thjeshtë është zëvendësimi i kufirit me skicën, e cila, siç e dimë, nuk ndikon në madhësinë e elementit (shembulli 2).

Shembulli 2: Korniza në Hover

skica nuk është gjithmonë e përshtatshme, vetëm sepse rrumbullakimi i qosheve nuk ndikon në të. Metoda e dytë është e përshtatshme këtu - shtoni një kornizë të padukshme ose një kornizë që përputhet me ngjyrën e sfondit dhe më pas ndryshoni parametrat e saj kur rri pezull (shembulli 3). Atëherë nuk do të ndodhë asnjë zhvendosje e elementit, pasi korniza fillimisht ekziston tashmë. Por ne kujtojmë gjithmonë se gjerësia e elementit është shuma e vlerave të gjerësisë, kufirit në të majtë dhe kufirit në të djathtë. Situata është e ngjashme me lartësinë.

Shembulli 3: Korniza në Hover

Kufiri rreth fushave të formës

Në disa shfletues (Chrome, Safari, versionet e fundit Opera) një ikonë e vogël shfaqet rreth fushave të formularit kur ato marrin fokus. kornizë me ngjyra(Fig. 2). Për ta hequr atë, thjesht shtoni vlerën none në vetinë e skicës në stile, siç tregohet në shembullin 4.

Oriz. 2. Kornizë rreth skajeve

Shembulli 4. Heqja e kornizës

Korniza përmes hijes së kutisë

Megjithëse vetia box-shadow synon të shtojë një hije rreth një elementi, ajo mund të përdoret gjithashtu për të krijuar kufij që nuk mund të krijohen duke përdorur kufirin ose skicën . E gjithë kjo falë faktit se numri i hijeve mund të jetë i pakufizuar, parametrat e të cilave renditen të ndara me presje.

Për të marrë një kornizë, tre parametrat e parë duhet të vendosen në zero; ata janë përgjegjës për pozicionin e hijes dhe turbullimin e saj. Parametri i katërt në në këtë rastështë përgjegjës për trashësinë e kufirit, dhe i pesti vendos ngjyrën e kufirit. Për kornizën e dytë, parametri i katërt është i barabartë me shumën e trashësisë së dy kornizave.

Shembulli 4 tregon se si të shtoni dy korniza dhe një kufi në të djathtë duke përdorur një veti të vetme kuti-hije.

Shembulli 4: Përdorimi i hijes së kutisë

Rezultati ky shembull treguar në Fig. 3.

Oriz. 3. Kornizat e krijuara nga vetia box-shadow

Për të kontrolluar kufirin e një elementi, përdorni pronë universale kufiri . Kjo veti ju lejon të vendosni trashësinë, stilin dhe ngjyrën e kufirit të një elementi në një deklaratë të vetme.

Këto tre veti (trashësia e kufirit, stili i kufirit dhe ngjyra) mund të vendosen në një deklaratë të vetme. Ja një shembull:

Ju mund të specifikoni një stil kufiri vetëm në njërën anë të një elementi. Për ta bërë këtë, përdorni vetitë kufi-lartë (kufiri i sipërm), kufiri-djathtas (kufiri djathtas), kufiri-poshtë (kufiri i poshtëm), kufiri-majtas (kufiri i majtë).

Në këtë shembull, secila anë e bllokut ka një trashësi, stil dhe ngjyrë të ndryshme të kufirit.

Mendoni se si të Ndihmë CSS ju mund të krijoni një formë si kjo:

Vlerat e kufirit - trashësia, stili dhe ngjyra - mund të vendosen veçmas duke përdorur veçori të veçanta.

• border-style - stil kufiri.
• border-width - gjerësia e kufirit.
• border-color - ngjyra e kufirit.

Le të shqyrtojmë secilën nga vlerat veç e veç.

pronë e stilit kufitar Stili i kufirit.

pronë kufitare-style vendos stilin e kufirit. Në CSS, në Dallimet në HTML, kufiri i një elementi mund të jetë jo vetëm i fortë. Vlerat e mëposhtme pranohen për stilin e kufirit:

1. asnjë - pa kufi (parazgjedhje).
2. kufi i fortë - solid.
3. kufiri i dyfishtë - dyfish.
4. kufi i ndërprerë - me pika.
5. me pika - një kufi i bërë nga një seri pikash.
6. kurriz - kufi "kresht".
7. groove - kufi "groove".
8. inset - kufiri i dëshpëruar.
9. fillim - kufi i ekstruduar.

Shembuj se si duken.

pa kufi (asnjë)

kufi i fortë

kufiri i dyfishtë

kufiri i një serie pikash (me pika)

kufiri i thyer

kufiri i brazdës

kufiri i kreshtës

kufiri i futur (futur)

kufiri i ekstruduar (fillimi)

Nga rruga, nëse vendosni ngjyrën e kufirit në të zezë për kornizën e kreshtës, do të merrni këtë rezultat.

Një bllok div me një kufi të zi dhe stil kreshtë.

Korniza duket e fortë, por kjo ndodh sepse stili i kreshtës krijohet duke shtuar një efekt hije të zezë dhe efekti i zi nuk është i dukshëm në një kornizë të zezë.

Duke përdorur veçorinë e stilit kufitar, stili i kufirit mund të vendoset jo vetëm për të gjitha anët e bllokut. Është e mundur të vendosni vlera të shumta për një pronë të stilit kufitar; në varësi të numrit të vlerave, stili i kufirit do t'i caktohet një numri të ndryshëm anash të bllokut. Mund të vendosni një, dy, tre ose katër vlera. Le të shohim shembuj për secilin rast.

Një vlerë (e ngurtë) - stili i kufirit është vendosur për të gjitha anët e bllokut.

Dy vlera (të dyfishta të ngurta) - vlera e parë vendos stilin për anët e sipërme dhe të poshtme, e dyta për anën.

Tre vlera (të ngurta me pika të dyfishta) - vlera e parë për anën e sipërme, e dyta për anët, e treta për pjesën e poshtme.

Katër vlera (të ngurta të dyfishta me pika) - secila vlerë për njërën anë në drejtim të akrepave të orës duke filluar nga lart.

Prona me gjerësi kufiri. Trashësia e kufirit.

Për të vendosur gjerësinë e kufirit të një elementi, përdorni veçorinë border-width. Trashësia e kufirit mund të specifikohet në çdo njësi matëse absolute, për shembull në piksel.

Ashtu si vetia e stilit kufitar, vetia mund të vendoset gjithashtu në një deri në katër vlera. Le të shohim shembuj për secilin rast.

Shembull i kodit:

Gjithashtu për pronën me gjerësi kufitare ka vlera në formë fjalë kyçe. Janë tre në total:

• kufiri i hollë - i hollë;
• trashësi mesatare - mesatare;
• kufi i trashë - i trashë;

Trashësia e kufirit: e hollë.

Trashësia e kufirit: e mesme.

Trashësia e kufirit: e trashë.

Vetia me ngjyrë kufiri. Ngjyra e kufirit.

Për të kontrolluar ngjyrën e kufirit, përdorni mjetin e ngjyrës së kufirit. Ngjyrat për këtë pronë mund të vendosen duke përdorur çdo metodë të përshkruar në artikull " Ngjyrat në CSS", domethënë:

• Shënimi heksadecimal (#ff00aa) i ngjyrës.
• Formati RGB- rgb(255,12,110) . Formati RGBA për CSS3.
• Formatet HSL dhe HSLA për CSS3.
• Emri i ngjyrës, për shembull i zi. Lista e plotë jepen emrat e ngjyrave Tabela e emrave të ngjyrave CSS.

Vetia me ngjyrë kufiri mund të ketë gjithashtu një deri në katër vlera dhe i trajton ato në mënyrë të ngjashme me vetitë e mëparshme.

Një vlerë (e kuqe).

Dy vlera (e kuqe e zezë).

Tre vlera (e kuqe e zezë e verdhë).

Katër vlera (e kuqe e zezë e verdhë blu).

Tani le të kthehemi te problemi i lartpërmendur dhe të vizatojmë një figurë:

Këtu është kodi që vizaton një figurë të tillë, vetëm më të madhe në madhësi:

Vendosja e vlerave për anët veç e veç

U përmend më lart se mund të specifikoni vlerat e pronës kufitare vetëm për njërën anë të një blloku. Ekzistojnë prona për këto qëllime:

• kufiri i sipërm (kufiri i sipërm)
• kufiri-djathtas
• kufi-fund
• kufiri i majtë (kufiri i majtë)

Më lejoni t'ju kujtoj se për të gjitha pronat janë specifikuar tre vlera (trashësia, stili dhe ngjyra) në çdo mënyrë. Por ka veti që ju lejojnë të vendosni trashësinë, ngjyrën dhe stilin për secilën anë veç e veç. Shkrimi i këtyre vetive rrjedh nga sa më sipër.

Opsionet e kufirit të sipërm (border-top).

• border-top-color - vendos ngjyrën e kufirit të sipërm të elementit.
• border-top-width - vendos trashësinë e kufirit të sipërm të elementit.
• border-top-style - vendos stilin e kufirit të sipërm të elementit.

Opsionet e kufirit të djathtë (kufi-djathtas).

• border-right-color - vendos ngjyrën e kufirit të djathtë të elementit.
• border-right-width - vendos trashësinë e kufirit të djathtë të elementit.
• border-right-style - vendos stilin e kufirit të djathtë të elementit.

Opsionet e kufirit të poshtëm (kufi-fund).

• border-bottom-color - vendos ngjyrën e kufirit të poshtëm të elementit.
• border-bottom-width - vendos trashësinë e kufirit të poshtëm të elementit.
• border-bottom-style - vendos stilin e kufirit të poshtëm të elementit.

Opsionet e kufirit të majtë (kufi-majtas).

• border-left-color - vendos ngjyrën e kufirit të majtë të elementit.
• border-left-width - vendos trashësinë e kufirit të majtë të elementit.
• border-left-style - vendos stilin e kufirit të majtë të elementit.

Një shembull i përdorimit të këtyre vetive:

Prona e rrezes kufitare. Rrumbullakimi i qosheve të kufirit.

Vetia border-radius synon të rrumbullakos cepat e kufijve të një elementi. Kjo veçori u shfaq në CSS3 dhe funksionon si duhet në të gjitha shfletues modern, me përjashtim të Internet Explorer 8 (dhe versione më të vjetra).

Vlerat mund të jenë çdo numër i përdorur në CSS.

Vetia e rrezes kufitare: 15 px.

Nëse korniza e bllokut nuk është e specifikuar, atëherë fileto ndodh me sfondin. Këtu është një shembull i një blloku të rrumbullakosur pa një kufi, por me një ngjyrë sfondi:

Vetia e rrezes kufitare: 15 px.

Ka veti për rrumbullakimin e çdo cepi individual të një elementi. Ky shembull i përdor të gjitha:

Rrezja e kufirit-lart-majtas: 15px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 15px; kufiri-poshtë-majtas-rrezja: 0;

Vetia e rrezes kufitare: 15 px.

Edhe pse ky kod mund të shkruhet në një deklaratë: border-radius : 15px 0 15px 0 . Çështja është se për vetitë e rrezes kufitare Mund të vendosni nga një deri në katër vlera. Tabela e mëposhtme përshkruan rregullat që rregullojnë njoftime të tilla.

Pasi të keni studiuar me kujdes këtë tabelë, mund të kuptoni se hyrja më e shkurtër për stilin e dëshiruar do të jetë kështu: kufiri-radius : 15px 0 . Ka vetëm dy kuptime.

Pak praktikë

Vizatimi i një limoni duke përdorur CSS.

Këtu është kodi për një bllok të tillë:

Marzhi: 0 auto; /* Qendër bllokun */ gjerësia: 200 px; lartësia: 200 px; sfond: #F5F240; kufiri: 1px solid #F0D900; kufiri-radius: 10px 150px 30px 150px;

Ne kemi vizatuar tashmë figurën:

Tani le të lëmë një trekëndësh prej tij:

Kodi i trekëndëshit është:

Marzhi: 0 auto; /* Qendër bllokun */ mbushje: 0px; gjerësia: 0 px; lartësia: 0; kufiri: 30 px i bardhë; kufiri-fund-ngjyra: e kuqe;