CSS: kufiri. Kufijtë e elementeve

për të shfaqur një kufi të dyfishtë. Metoda e vetme që funksionon kudo:

Katër (kufiri: solid 6 px # 888; sfondi: #fff; gjerësia: 312 px; min-lartësia: 312 px;) .katër div (gjerësia: 300 px; min-lartësia: 300 px; sfondi: # 222; diferenca: 6 px automatike; tejmbushje : i fshehur;)

Elementi i jashtëm është pak më i madh, duke dhënë iluzionin e një kufiri të dyfishtë.

Metoda 5: vetia e imazhit kufitar

Një teknikë tjetër e re është vetia e imazhit të kufirit CSS3 e anashkaluar shpesh:

Pesë (gjerësia e kufirit: 12 px; -koti i internetit-kufijtë-imazhi: url (kufijtë e shumëfishtë.gif) 12 12 12 12 përsërit; kufiri-imazh: url (kufij të shumëfishtë) 12 12 12 12 përsërit; / * për Opera * /)

A dini një metodë tjetër?

Sigurisht, këtu janë mbledhur metoda të njohura dhe të përdorura gjerësisht. Por ju ndoshta dini një truk. Ndani me lexuesit tuaj në komente.

Vlad Merzheviç

Me CSS, ju mund të shtoni një kufi në një element në disa mënyra. Në thelb, natyrisht, prona kufitare përdoret si më universale, si dhe skica dhe, çuditërisht, hije-kuti, 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ërvijoni pronën

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

• skica është tërhequr rreth elementit (kufiri është 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, jo në anët individuale (kufiri mund të përdoret në çdo anë ose të gjitha menjëherë);
• skica nuk ndikohet nga rrezja e rrumbullakosjes e vendosur nga vetia kufi-radius (kufiri është prekur).

Shtrohet pyetja - në cilat raste nevojitet përvijimi, kur roli i tij, pavarësisht dallimeve të listuara, merret plotësisht nga kufiri? Nuk ka shumë situata, por ato ndodhin:

• krijimi i kornizave komplekse me shumë ngjyra;
• shtimi i një kufiri në një element kur rri pezull mbi të me kursorin e miut;
• fshehja e kornizës së shtuar nga shfletuesi automatikisht për disa elementë kur ata marrin fokusin;
• për një skicë, mund të vendosni distancën nga skaji i një elementi në kornizë duke përdorur veçorinë outline-offset për të krijuar.

Korniza me shumë ngjyra

Duhet të kuptohet se skica në asnjë mënyrë nuk zëvendëson kufirin dhe mund të ekzistojë me të, siç tregohet në shembullin 1.

Shembull 1. Krijimi i një kornize

Në këtë shembull, rreth elementit shtohet një kufi i zi, i cili ndahet nga sfondi me një kufi të bardhë (Fig. 1).

Oriz. 1. Kornizë rreth elementit

Korniza kur përdoret: rri pezull

Shtimi i një kufiri përmes kufirit rrit gjerësinë e elementit, 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 kontur, i cili e dimë se nuk ka asnjë efekt në dimensionet e elementit (shembulli 2).

Shembulli 2. Kufiri në hover

skica nuk është gjithmonë e përshtatshme, vetëm sepse rrumbullakimi i qosheve nuk ndikon në të. Këtu metoda e dytë është e përshtatshme - shtoni një kornizë ose kornizë të padukshme 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 tashmë ekziston që nga fillimi. Por gjithmonë mbani mend 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. Kornizë në hover

Kufiri rreth fushave të formës

Në disa shfletues (Chrome, Safari, versionet më të fundit të Opera), një kufi i vogël me ngjyra shfaqet rreth fushave të formularit kur ato marrin fokusin (Figura 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 fushave

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ë bëhen me një kufi ose skicë. Kjo për faktin se numri i hijeve mund të jetë i pakufizuar, parametrat e të cilave renditen të ndara me presje.

Për të marrë kornizën, 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ë 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ë shuma e trashësisë së dy kornizave.

Shembulli 4 tregon se si të shtoni dy kufij dhe një kufi në të djathtë duke përdorur një veçori kuti-hije.

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

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

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

Korniza CSS3 shton aftësitë e formatimit të kufijve të elementeve me vetitë që lejojnë qoshe të rrumbullakëta element dhe gjithashtu përdorim Imazhet për të dekoruar kufijtë e një elementi.

Qoshe të rrumbullakosura dhe korniza fotografish

1. Këndet e rrumbullakosura me kufi-rreze

Mbështetja e shfletuesit

IE: 9.0
Firefox: 4.0
Krom: 4.0
Safari: 5.0, 3.1 -kit në internet-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Shfletuesi Android: 4.1
Chrome për Android: 44

Vetia lejon që qoshet e elementeve të linjës dhe të bllokut të rrumbullakohen. Lakorja për çdo cep përcaktohet me një ose dy rreze që përcaktojnë formën e tij - rrethi ose elips... Rrezja shtrihet në të gjithë sfondin, edhe nëse elementi nuk ka kufij, pozicioni i saktë i sekantit përcaktohet duke përdorur veçorinë background-clip.

Vetia border-radius ju lejon të rrumbullakosni të gjitha qoshet në të njëjtën kohë, dhe duke përdorur rrezen e kufirit-lart-majtas, rreze-lartë-djathtas-kufitar, rreze-bord-poshtë-djathtas-rreze, kufi-poshtë-majtas-radius pronat që mund të rrumbullakosni çdo cep veç e veç ...

Nëse vendosni dy vlera për pronën e rrezes kufitare, atëherë vlera e parë do të rrumbullakoset majtas lart dhe këndi i poshtëm i djathtë dhe e dyta është lart djathtas dhe poshtë majtas.

Vlerat e dhëna nëpërmjet/përcaktojnë horizontale dhe rrezet vertikale... Prona nuk është e trashëguar.

Variantet

Div (gjerësia: 100 px; lartësia: 100 px; kufiri: 5 px solid;) .r1 (rreze kufitare: 0 0 20 px 20 px;) .r2 (rreze-kufi: 0 10 px 20 px;) .r3 (kufitare-rreze: 10 px ;) .r4 (rrezja-kufitare: 10px / 20px;) .r5 (rrezja e kufirit: 5px 10px 15px 30px / 30px 15px 10px 5px;) .r6 (rrezja kufitare: 0xp ;0xp . kufiri-radius: 50%;) .r8 (border-lart: asnjë; border-bottom: asnjë; border-radius: 30px / 90px;) .r9 (border-bottom-left-radius: 100px;) .r10 (kufiri -rrezja: 0 100%;) .r11 (rrezja kufitare: 0 50% 50% 50%;) .r12 (rrezja kufitare-lart-majtas: 100% 20 px; rrezja kufitare-poshtë-djathtas: 100% 20 px ;)
Oriz. 1. Shembuj të opsioneve të ndryshme për rrumbullakimin e qosheve të bllokut

2. Kufi-imazh

Mbështetja e shfletuesit

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Krom: 16.0, 7.0 -kit në internet-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Shfletuesi Android: 4.4, 4.1 -kit në internet-
Chrome për Android: 42

Vetia ju lejon të vendosni imazhin si kufi të elementit. Kërkesa kryesore për imazhin është se ai duhet të jetë simetrik. Vetia përfshin vlerat e mëposhtme: (kufi-imazh: gjerësia e pjesës së burimit të përsëritur në fillim;).

Me një imazh kaq të thjeshtë, mund të merrni një kornizë të tillë për një element.

/ * Shembulli 1 * / div (gjerësia: 260 pikselë; lartësia: 100 pikselë; stili i kufirit: i ngurtë; gjerësia e imazhit kufitar: 15 pikselë; burimi i imazhit kufi: url (border_round.png); pjesa e figurës kufitare: 30 ; kufiri-imazh-përsërit: shtrirje;) / * Shembulli 2 * / div (gjerësia: 260 pikselë; lartësia: 100 px; stili i kufirit: i ngurtë; gjerësia e imazhit kufitar: 15 pikselë; burimi i imazhit kufi: url (kufi_round. png); kufiri-imazhi-feta: 30; kufiri-imazhi-përsëritja: rrumbullakët;)
Oriz. 2. Një shembull i dekorimit të kufijve të një blloku duke përdorur një imazh

Fetat A - B - C - D formojnë qoshet e kufirit, dhe pjesa e figurës ndërmjet tyre mbush hapësirën e mbetur të kufirit sipas vlerës së specifikuar të vetive kufi-imazh-përsëritje. Madhësia e këndit (në këtë shembull, numri 30) vendoset duke përdorur vlerën e veçorisë border-image-slice.

2.1. Kufiri-imazhi-gjerësia

Vetia cakton gjerësinë e imazhit për kufirin e elementit. Nëse nuk është specifikuar gjerësi, ajo vendoset në 1.

kufiri-imazhi-gjerësia
Vlerat:
gjatësia	Vendos gjerësinë e kufirit në njësi të gjatësisë - px / em. Mund të vendosni nga një deri në katër vlera në të njëjtën kohë. Nëse jepet një vlerë, atëherë gjerësia e të gjitha anëve të kornizës është e njëjtë, dy vlera vendosin gjerësinë e sipërme-poshtë dhe djathtas-majtas, etj.
numri	Vlera numerike me të cilën shumëzohet vlera e gjerësisë së kufirit.
%	Gjerësia e kufirit të elementit llogaritet në lidhje me madhësinë e figurës. Horizontale në lidhje me gjerësinë, vertikale - në lidhje me lartësinë.
auto	Korrespondon me kufirin-image-slice.
fillestare
trashëgojnë

Sintaksë

Div (border-image-width: 30px;) Fig. 3. Një shembull i vendosjes së gjerësisë së kornizës së imazhit duke përdorur lloje të ndryshme vlerash

2.2. Burim kufiri-imazh-burim

Vetia përcakton rrugën drejt imazhit që do të përdoret për të dekoruar kufijtë e bllokut.

Sintaksë

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

2.3. Elementet kufi-imazh-fetë

Vetia përcakton madhësinë e pjesëve të imazhit të përdorura për të dekoruar kufijtë e elementit dhe e ndan imazhin në nëntë pjesë: katër qoshe, katër skaje midis qosheve dhe një pjesë qendrore.

Vlerat:
numri	Madhësia e pjesëve të kornizës mund të vendoset duke përdorur një, dy, tre ose katër vlera. Një vlerë vendos kufijtë në të njëjtën madhësi për secilën anë të elementit. Dy vlera: e para përcakton madhësinë e kufijve të sipërm dhe të poshtëm, e dyta - djathtas dhe majtas. Tre vlera: e para përcakton madhësinë e kufirit të sipërm, e dyta - djathtas dhe majtas, dhe e treta - kufiri i poshtëm. Katër vlera: Përcakton madhësinë e kufirit të sipërm, të djathtë, të poshtëm dhe të majtë. Vlera numerike paraqet numrin e px.
%	Madhësitë e kufirit llogariten në lidhje me madhësinë e imazhit. Horizontale në lidhje me gjerësinë, vertikale - në lidhje me lartësinë.
mbush	Vlera tregohet së bashku me një numër ose përqindje. Nëse specifikohet, imazhi nuk pritet me skajin e brendshëm të kornizës, por gjithashtu mbush zonën brenda kornizës.
fillestare	E vendos këtë veti në vlerën e saj të paracaktuar.
trashëgojnë	Trashëgon vlerën e kësaj prone nga mëma e saj.

Sintaksë

Div (kufi-imazh-fetë: 50 20;)
Oriz. 4. Një shembull i vendosjes së pjesëve të një kornize imazhi

2.4. Kufi-imazh-përsërit

Vetia kontrollon mbushjen e hapësirës midis qosheve të kornizës nga imazhi i sfondit. Mund të vendoset duke përdorur një vlerë të vetme ose duke përdorur një palë vlerash.

Sintaksë

Div (kufi-imazh-përsëritje: përsërit;) Fig. 5. Një shembull i përsëritjes së pjesës qendrore të kornizës së imazhit duke përdorur lloje të ndryshme vlerash

2.5. Offset kufiri-imazh-fillimi

Vetia ju lejon të zhvendosni imazhin e kornizës jashtë kufijve të elementit sipas gjatësisë së specifikuar. Mund të vendoset duke përdorur një ose katër vlera.

Sintaksë

Div (kufi-imazh-fillimi: 10 px;)
Oriz. 6. Një shembull i zhvendosjes së kornizës së imazhit duke përdorur lloje të ndryshme vlerash

3. Kompensimi i skicës së jashtme të kornizës

Vetia cakton distancën midis kufirit të elementit kufitar dhe kufirit të jashtëm të krijuar me veçorinë skicë.

/ * Figura 1: * / img (kufiri: 1px rozë e fortë; skica: 1px gri me pika; skicë-offset: 3px;) / * Figura 2: * / img (gjerësia e kufirit: 1px 10px; stili i kufirit: i ngurtë; ngjyra e kufirit: rozë; skica: 1 px gri e ndërprerë; skica-offset: 3 px;) / * Figura 3: * / img (kufiri: 3 pikselë rozë e futur; skica: 1 px gri me pika; skica-offset: 1 px;)
Oriz. 7. Një shembull i dekorimit të imazhit me një kornizë të jashtme

4. Korniza e gradientit

Vlera e imazhit të kufirit mund të jetë jo vetëm një imazh, por edhe një mbushje gradient.

Kornizë e tejdukshme

Transparenca është një nga ngjyrat. Në këtë mënyrë, ju mund të vendosni kufijtë për të gjitha anët e një elementi menjëherë ose veçmas për secilën anë. Gjerësia e kufirit kontrollohet nga vetia e gjerësisë së kufirit.

* (madhësia e kutisë: kutia e kufirit;) .mbështjellja (lartësia: 200 px; mbushja: 25 px; sfondi: # 00E4F6;) gradient (lartësia: 150 px; gjerësia: 50%; diferenca: 0 automatik; kufiri: 10 px transparente e ngurtë ; kufiri-imazh: gradient linear (djathtas, transparent 0%, # ADF2F7 100%); kufiri-imazh-copëtim: 1;)

Zarf postar

* (madhësia e kutisë: kutia e kufirit;) .mbështjellja (lartësia: 200 px; mbushja: 25 px;) .gradient (lartësia: 150 px; gjerësia: 50%; diferenca: 0 automatike; kufiri: 10 px transparente e ngurtë; kufiri-imazh: 10 gradient linear-përsëritës (45 gradë, # A7CECC, # A7CECC 10 px, transparente 10 px, transparente 20 px, # F8463F 20 px, # F8463F 30px, transparent 30px, transparent 40px);

Vetia e kufirit CSS emërtohet për të krijuar kufirin e një objekti, përkatësisht trashësinë e kufirit, ngjyrën dhe stilin e tij. Kjo veçori përdoret gjerësisht në HTML. Mund të krijoni efekte të ndryshme për të perceptuar më mirë përmbajtjen në faqe. Për shembull, dizajnoni një shirit anësor, kokën e faqes, menunë, etj.

1. Sintaksa e kufirit CSS

kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;

• border-width - trashësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesëm, të trashë (ato ndryshojnë vetëm në gjerësi në piksel)
• border-style - stili i kufirit të dhënë. Mund të marrë vlerat e mëposhtme
  • asnjë ose i fshehur - anulon kufirin
  • me pika - kornizë me pika
  • dash - kornizë dash
  • linjë e fortë - e thjeshtë (përdoret më shpesh)
  • kufiri i dyfishtë - dyfish
  • groove - kufi me brazdë 3D
  • kurriz, hyrje, fillim - efekte të ndryshme të kornizës 3D
  • trashëgoj - aplikohet vlera e elementit mëmë
• border-color - ngjyra e kufirit. Mund të vendoset duke përdorur një emër specifik ngjyrash ose në formatin RGB (shih emrat e ngjyrave html për sitin)

shënim

Vlerat në pronën e kufirit CSS mund të specifikohen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".

2. Shembuj me kufij të ndryshëm të kufirit CSS

2.1. Shembull. Stilet e ndryshme të dekorimit të kufirit në stilin e kufirit

stil kufiri: i ndërprerë

stil kufiri: i ndërprerë

kufiri-style: solid

kufiri-style: dyfishtë

kufi-style: brazdë

kufi-style: kurriz

kufiri-style: futur

kufiri-style: fillimi

Katër korniza të ndryshme

kufiri-style: me pika

stil kufiri: i ndërprerë

kufiri-style: solid

kufiri-style: dyfishtë

kufi-style: brazdë

kufi-style: kurriz

kufiri-style: futur

kufiri-style: fillimi

Katër korniza të ndryshme

2.2. Shembull. Ngjyra e kufirit ndryshon në lëvizjen e miut

Ky shembull është shumë i thjeshtë por interesant. Tregon se si mund të përdorni: pseudo-klasën pezull dhe kufirin CSS për të krijuar efekte të thjeshta (si menytë).

Kur vendosni kursorin e miut mbi bllok, ngjyra e kufirit do të ndryshojë

Kështu duket në faqe:

2.3. Shembull. Si të bëni një kufi transparent

Korniza mund të bëhet transparente. Ky efekt është i rrallë, por ndonjëherë mund të jetë shumë i dobishëm për dizajnerët e uebit. Për të vendosur transparencën, duhet të përdorni cilësimin e ngjyrave në formën e RGBA (R, G, B, P), ku parametri i fundit vendos transparencën (një numër real nga 0.0 në 1.0)

Kështu duket në faqe:

3. Trashësia e kufirit: vetia e gjerësisë së kufirit

Përcakton trashësinë e vijës. Më parë e vendosëm në një përshkrim të vetëm kufiri.

Sintaksa e gjerësisë së kufirit CSS

gjerësia e kufirit: i hollë | e mesme | trashë | kuptimi;

• trashësia e vijës së hollë - hollë
• gjerësia e linjës mesatare - mesatare
• trashë - trashësi vijë e trashë

Më poshtë janë disa shembuj. Gjëja më e pazakontë do të jetë trashësia e ndryshme e kufirit në secilën anë.

gjerësia e kufirit: e hollë

gjerësia e kufirit: e mesme

gjerësia e kufirit: e trashë

Trashësi të ndryshme në kufij

Kështu duket në faqe:

gjerësia e kufirit: e hollë

gjerësia e kufirit: e mesme

gjerësia e kufirit: e trashë

Trashësi të ndryshme në kufij

4. Si të bëni një kufi me vetëm një skaj (kufi)

Vetia e kufirit CSS ka veti të derivuara për vendosjen e kufijve të njëanshëm në një element:

• border-top - për të vendosur kufirin në krye (kufiri i sipërm)
• border-bottom - për të vendosur kufirin në fund (kufiri i poshtëm)
• kufiri-djathtas - për të vendosur kufirin në të djathtë (kufiri i djathtë)
• kufiri-majtë - për të vendosur kufirin në të majtë (kufiri i majtë)

Këta kufij mund të kombinohen, d.m.th. të përshkruajë kornizën e vet për çdo drejtim. Sintaksa është saktësisht e njëjtë me kufirin.

Ka edhe prona

• border-top-color - vendos ngjyrën e kufirit të sipërm
• border-top-style - Vendos stilin e kufirit të sipërm
• border-top-width - vendos trashësinë e kufirit të sipërm
• etj. për çdo drejtim

Sipas mendimit tim, është më e lehtë të shkruash gjithçka në një rresht sesa të prodhosh tekst shtesë në stile. Për shembull, vetitë e mëposhtme do të jenë të njëjta

/* Përshkrimi i dy stileve identike: */

4.1. Shembull. Kornizë e bukur për të theksuar kuotat

Shembull i një kornize kuotash

Kështu duket në faqe:

Shembull i një kornize kuotash

shënim
Ju mund të vendosni një kufi të veçantë për secilën anë.

5. Si të bëni kufij të shumëfishtë në një element html

Ndonjëherë ju duhet të bëni kufij të shumtë. Le të japim një shembull

5.1. Opsioni i parë me kufij të shumtë

Kështu duket në faqe:

Ekziston një mënyrë e dytë përmes mbivendosjes së hijeve.

5.2. Përzierja e hijeve për të krijuar kufij të shumtë

Kështu duket në faqe:

6. Rrumbullakimi i qosheve në kufij (rreze-kufi)

Përdorni veçorinë CSS border-radius (e disponueshme vetëm në CSS3) për të krijuar kufij të bukur. Me të mund të rrumbullakoni qoshet, gjë që krijon një pamje krejtësisht të ndryshme. për shembull

7. Rreshti i prerë CSS

Linjat e injektuara mund të duken spektakolare në një sfond të errët, i cili nuk është i përshtatshëm për çdo vend.

---

Kështu duket në faqe:

Për të hyrë në kufirin nga JavaScript, duhet të shkruani konstruksionin e mëposhtëm:

dokument.getElementById ("elementID").style.border= "VLERË" (! GJUHË: