Si të bëni css të bukur të kufirit. Kornizat dhe kufijtë

Kufijtë janë linjat që rrethojnë një element (përmbajtja që përmban dhe mbushja rreth tij). Shembulli që kemi parë tashmë janë kufijtë e qelizave brenda një tabele.

CSS ofron dy lloje kufijsh: kufijtë e brendshëm dhe linjat e jashtme. Karakteristikat CSS që janë përgjegjëse për stilimin e kufijve fillojnë me fjalën "kufi", e cila mund të përkthehet si "Border", "Border". Prania dhe formati i skicës së jashtme përcaktohet nga vetitë që fillojnë me fjalën "skicë". Skica, ndryshe nga kufiri, nuk ndikon në gjerësinë dhe pozicionin e kutisë që do të kornizohet. Gjithashtu, nuk mund të instalohet vetëm në njërën anë, si p.sh kufiri- vetëm nga të gjitha anët menjëherë.

Le të flasim fillimisht për dizajnin e kufirit, pastaj të kalojmë te përvijojnë.

gjerësia e kufirit

Vendos gjerësinë e kufijve. Është e qartë se si parazgjedhje elementi është i rrethuar me korniza nga katër anët. Vetia ju lejon të vendosni gjerësinë e kufijve si për të gjitha anët njësoj dhe të ndryshme për secilën anë. Në varësi të gjerësisë që dëshironi të caktoni në cilat kufij, mund të specifikoni nga një deri në katër vlera në rregull.

Ju mund të vendosni gjerësinë duke përdorur pikselat, përqindjet dhe njësitë e tjera të zakonshme. Gjatësia CSS dhe fjalë të rezervuara i hollë(2 px), e mesme(4px) dhe trashë(6 px).

Gjerësia e kufirit: 16px 12px 4px 8px;

të stilit kufitar

Përcakton stilin e kufirit. Ju lutemi vini re: nëse nuk e vendosni këtë rregull, por specifikoni pronën gjerësia e kufirit, atëherë nuk do të ketë fare kufij, kështu që nëse dëshironi kufij të dukshëm, sigurohuni që të specifikoni të stilit kufitar.

Prona mund të ketë mjaft vlera, të gjitha ato tregohen qartë në figurën më poshtë.

Paragrafi i fundit tregon se stili, si trashësia, mund të jetë i ndryshëm për secilën anë të kufirit:

stili i kufirit: asnjë i ngurtë me dy pika

kufi-ngjyrë

Punon në të njëjtën mënyrë si vetitë e mëparshme, por është përgjegjës për ngjyrën e kufijve. Mund të vendoset gjithashtu nga një në katër vlera, dhe ju tashmë e dini rezultatin. Nëse rregulli nuk është vendosur, kornizat do të kenë ngjyrën e tekstit të elementit aktual ose, nëse nuk specifikohet, ngjyrën e tekstit të elementit prind.

Ngjyra e kufirit: # C85EFA;

kufiri

Thjeshtëson shënimin dhe ruan kodin duke ju lejuar të vendosni të gjitha vetitë e listuara për kufijtë në të gjitha anët e një elementi në një rresht:

P (kufiri: 2 px jeshile;)

Për të vendosur rregulla të ndryshme për kornizat me anët e ndryshme mund të përdoren vlerat e mëposhtme:

• kufi-majëështë kufiri i sipërm.
• kufiri-djathtas- drejtë.
• kufiri-fund- fundi.
• kufiri-majtas- majtas.

P (kufiri-majtas: 6px e verdhë me pika;)

skicë-gjerësi

E njejte si gjerësia e kufirit, vetëm për kornizën e jashtme, jo të brendshme. Vendos trashësinë e skicës në të njëjtat vlera si gjerësia e kufirit... Përveç trashësisë së kornizës së elementit, duhet të specifikoni stilin e tij, përndryshe nuk do të ketë skicë.

skicë-stili

Vlerat e pronës vlera të dyfishta të stilit kufitar... Rregulli përcakton stilin e rrugës së jashtme.

Korniza CSS një element është një ose më shumë rreshta që rrethojnë përmbajtjen dhe mbushjen e elementit. Korniza është vendosur duke përdorur një të shkurtër vetitë kufitare... Stili i kufirit vendoset duke përdorur tre veti: stil, ngjyrë dhe gjerësia.

Stilimi i kufijve dhe kufijve të elementeve HTML me vetitë CSS

1. Stil kufitar

Si parazgjedhje, kufijtë vizatohen gjithmonë në krye të sfondit të elementit, sfondi shtrihet në skajin e jashtëm të elementit. Stili i kornizës përcakton shfaqjen e tij, pa këtë veti kornizat nuk do të jenë fare të dukshme. Për një element, mund të caktoni një kufi për të gjitha anët në të njëjtën kohë duke përdorur veçorinë e stilit të kufirit, ose për secilën anë veçmas duke përdorur veçoritë kualifikuese të stilit kufitar-lart, etj. E pa trashëguar.

të stilit kufitar (stili i kufirit-lart, i stilit të kufirit-djathtas, i stilit të kufirit-poshtë, i stilit të kufirit-majtas)
Vlerat:
asnje	Vlera e paracaktuar do të thotë pa kufi. Gjithashtu heq kufirin e një elementi nga një grup elementësh me një vlerë të caktuar të kësaj pasurie.
i fshehur	Ekuivalente me asnjë.
me pika	me pika
i thyer	i thyer
të ngurta	të ngurta
dyfishtë	dyfishtë
brazdë	brazdë
kurriz	kurriz
futur	futur
fillimi	fillimi
{1,4}	Duke numëruar njëkohësisht katër stile të ndryshme për kufijtë e elementit, vetëm për veçorinë e stilit kufi: (Stil kufiri: me pika të forta asnjë me pika;)
fillestare
trashëgojnë

Sintaksë

P (stili i kufirit: i ngurtë;) p (stili i kufirit në krye: i ngurtë;)

2. Border color border-color

Vetia përcakton ngjyrën e kufijve të të gjitha anëve në të njëjtën kohë. Me ndihmën e sqarimit të vetive, mund të vendosni një ngjyrë të personalizuar për kufirin e secilës anë të elementit. Nëse asnjë ngjyrë nuk është specifikuar për kufirin, atëherë ajo do të jetë e njëjtë me ngjyrën e tekstit të elementit. Nëse elementi nuk ka tekst, atëherë ngjyra e kufirit do të jetë e njëjtë me ngjyrën e tekstit të elementit prind. E pa trashëguar.

kufi-ngjyrë (kufiri-lartë-ngjyra, kufiri-ngjyra djathtas, kufiri-ngjyra e poshtme, kufiri-ngjyra majtas)
Vlerat:
transparente	Vendos ngjyrën transparente për kufirin. Në këtë rast, gjerësia e kornizës mbetet. Mund të përdoret për të ndryshuar ngjyrën e kufirit kur vendosni miun mbi një element për të shmangur zhvendosjen e elementit.
ngjyrë	Ngjyra e kornizave vendoset duke përdorur vlerat e vetive. (ngjyra e kufirit: # cacd58;)
{1,4}	Renditja e katër në të njëjtën kohë ngjyra të ndryshme për kufijtë e elementeve, vetëm për veçorinë e ngjyrës së kufirit: (ngjyra e kufirit: # cacd58 # 5faf8a # b9cea5 # aab238;)
fillestare	Vendos vlerën e pronës në vlerën e saj të paracaktuar.
trashëgojnë	Trashëgon vlerën e pronës nga elementi mëmë.

Sintaksë

P (ngjyra e kufirit: # cacd58;)

3. Gjerësia e kufirit-gjerësia

Gjerësia e kornizës specifikohet duke përdorur njësitë e gjatësisë ose fjalë kyçe... Nëse vetia e stilit kufitar vendoset në asnjë dhe kufiri i elementit vendoset në një farë gjerësie, atëherë in në këtë rast gjerësia e kufirit është vendosur në zero. E pa trashëguar.

Sintaksë

P (gjerësia e kufirit: 2 px;)

4. Vendosja e kornizës me një veti

Vetia kufitare ju lejon të kombinoni vetitë e mëposhtme: gjerësia e kufirit, stili i kufirit, ngjyra e kufirit, për shembull:

Div (gjerësia: 100 px; lartësia: 100 px; kufiri: 2 px gri e fortë;)

Në këtë rast, vetitë e specifikuara do të aplikohen në të gjitha kufijtë e elementit në të njëjtën kohë. Nëse ndonjë nga vlerat nuk është specifikuar, vlera e paracaktuar do të zërë vendin e saj.

5. Vendosja e një kufiri për një kufi të një elementi

Në rastin kur duhet të vendosni një stil tjetër të kufijve të elementeve, mund të përdorni një shënim të shkurtër për kufirin përkatës.
Karakteristikat e mëposhtme kombinojnë vetitë e mëposhtme në një deklaratë të vetme: gjerësia e kufirit, stili i kufirit dhe ngjyra e kufirit. Lista e pronave specifikohet në rendin e specifikuar, ndërsa një ose dy vlera mund të hiqen, me ç'rast vlerat e tyre do të marrin vlerat e tyre të paracaktuara.

Stili i kufirit të sipërm caktohet duke përdorur veçorinë border-lart, pjesa e poshtme është kufiri-poshtë, e majta është kufiri-majtas dhe e djathta është kufiri-djathtas.

Sintaksë

P (kufi në krye: 2px gri e fortë;)

6. Skicë e konturit të jashtëm

Vetia vendos kufirin e jashtëm rreth elementeve (d.m.th. jashtë kufirit normal). Qëllimi kryesor i kësaj vetie është të nxjerrë në pah një element. Ndryshe nga vetia kufitare, aplikimi i kësaj vetie nuk ndikon në madhësinë ose pozicionin e elementit, pasi është. skica vizatohet në krye të bllokut të elementit, i cili nga ana tjetër mund të shkaktojë mbivendosje kufijtë elementi dhe zonat ngjitur.

Gjithashtu, kontura e jashtme, ndryshe nga kufiri i elementit, e rrethon elementin nga të gjitha anët, duke e inkuadruar atë tërësisht.

Kontura e jashtme është gjithmonë drejtkëndëshe; nuk ndjek kufijtë e kutisë për të cilën është vendosur rrezja kufitare.

Vetia outline ju lejon të kombinoni vetitë e mëposhtme: skicë-ngjyra, skicë-stili, skicë-gjerësia. Nëse ndonjë nga vlerat nuk është specifikuar, vlera e paracaktuar do të zërë vendin e saj.

Div (gjerësia: 100 px; lartësia: 100 px; skica: # cacd58 solid 2 px;)

6.1. Stili i përvijimit skicë-stili

Pamja e vijës së konturit të jashtëm vendoset në të njëjtën mënyrë si me stilin e kufirit të elementit. E pa trashëguar.

Sintaksë

P (stili i përvijimit: kreshtë;)

6.2. Përvijimi i ngjyrës kontur-ngjyra

Ngjyra e konturit të jashtëm mund të caktohet vetëm kur vlerë të caktuar skicë-stili. E pa trashëguar.

Sintaksë

P (stili i skicës: kreshtë; skica-ngjyra: argjendi;)

6.3. Trashësia e konturit skicë-gjerësia

Trashësia e vijës së konturit të jashtëm vendoset në të njëjtën mënyrë si trashësia e kornizës së elementit. E pa trashëguar.

Sintaksë

P (stili i skicës: me pika; gjerësia e skicës: 5 px;)

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

Këto tre veti (trashësia, stili dhe ngjyra e kufirit) 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 majtas).

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

Mendoni si kur 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 - stili i kufirit.
• border-width - gjerësia e kufirit.
• border-color - ngjyra e kufirit.

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

Prona e stilit kufitar. Stili i kufirit.

Vetia e stilit kufitar përcakton stilin e kufirit. Në CSS, në Dallimet në HTML, kufiri i një elementi mund të jetë jo vetëm i fortë. Vlerat e vlefshme për stilin e kufirit janë:

1. asnjë - pa kufi (i parazgjedhur).
2. kufi i fortë - solid.
3. kufiri i dyfishtë - dyfish.
4. i ndërprerë - kufiri i ndërprerë.
5. me pika - Një kufi i përbërë nga një seri pikash.
6. kurriz - kufiri i kreshtës.
7. groove - kufi groove.
8. inset - një kufi i prerë.
9. fillim - kufi i ekstruduar.

Shembuj se si duken.

pa kufi (asnjë)

kufi i fortë

kufiri i dyfishtë

kufi me pika

kufiri i thyer

kufiri i brazdës

kufiri i kreshtës

kufiri i futur

fillimi

Nga rruga, nëse vendosni ngjyrën e kufirit në të zezë për kornizën e kreshtës, ju merrni rezultatin e mëposhtëm.

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

Kufiri duket si i ngurtë, por kjo për shkak se stili i kreshtës krijohet duke shtuar një efekt të hijes së zezë dhe efekti i zi në kufirin e zi nuk është i dukshëm.

Duke përdorur veçorinë e stilit kufitar, stili i kufirit mund të vendoset për më shumë se vetëm për të gjitha anët e bllokut. Është e mundur të vendosni disa vlera 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. Ju mund të vendosni një, dy, tre dhe 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ë përcakton stilin për anët e sipërme dhe të poshtme, e dyta për anën.

Tre vlera (të ngurta me dy pika) - vlera e parë për anën e sipërme, e dyta për anën, 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.

Vetia border-width përdoret për të vendosur trashësinë e kufirit të një elementi. Trashësia e kufirit mund të specifikohet në çdo njësi matëse absolute, siç janë pikselët.

Ashtu si me vetinë 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:

Ekzistojnë gjithashtu vlera të fjalëve kyçe për veçorinë me gjerësi kufiri. Janë tre prej tyre:

• 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ë.

Prona me ngjyrë kufiri. Ngjyra e kufirit.

Lehtësia e ngjyrës së kufirit përdoret për të kontrolluar ngjyrën e kufirit. Ngjyrat për këtë veti mund të vendosen duke përdorur çdo metodë të përshkruar në artikullin "Ngjyrat në CSS", përkatësisht:

• 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, si p.sh. e zezë. Lista e plotë emrat e ngjyrave janë renditur në tabelën e emrave të ngjyrave CSS.

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

Një vlerë (e kuqe).

Dy vlera (e kuqe e zezë).

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

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

Tani le të kthehemi te problemi i përshkruar më sipër dhe të vizatojmë një formë:

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

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

Siç u përmend më lart, ju mund të specifikoni vlerat e pronës kufitare vetëm për njërën anë të një blloku. Për këto qëllime, ekzistojnë prona:

• kufiri i sipërm (kufiri i sipërm)
• kufiri-djathtas (kufiri i djathtë)
• kufiri i poshtëm (kufiri i poshtëm)
• kufiri i majtë (kufiri i majtë)

Më lejoni t'ju kujtoj se të gjitha pronat kanë tre vlera (trashësi, stil dhe ngjyrë) 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ë një elementi.

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

• border-right-color - Vendos ngjyrën e kufirit të djathtë të një elementi.
• border-right-width - Vendos gjerësinë e kufirit të djathtë të një elementi.
• border-right-style - Vendos stilin e kufirit të djathtë të një elementi.

Parametrat e poshtëm (border-fund).

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

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

• border-left-color - Vendos ngjyrën e kufirit të majtë të elementit.
• border-left-width - Vendos gjerë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:

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

Vetia e rrezes kufitare është për rrumbullakimin e qosheve të kufijve të një elementi. Kjo veçori u prezantua në CSS3 dhe funksionon si duhet në të gjitha shfletues modern, me përjashtim të Internet Explorer 8 (dhe më i vjetër).

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

Vetia e rrezes kufitare është 15 px.

Nëse korniza e bllokut nuk është e specifikuar, atëherë rrumbullakimi ndodh me sfondin. Këtu është një shembull i rrumbullakosjes së një kutie pa kufi, por me një ngjyrë sfondi:

Vetia e rrezes kufitare është 15 px.

Ka veti për rrumbullakimin e secilit cep të një elementi individualisht. 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-rreze: 0;

Vetia e rrezes kufitare është 15 px.

Edhe pse ky kod mund të shkruhet në një deklaratë: kufiri-radius: 15px 0 15px 0. Çështja është se vetia kufi-radius mund të vendoset nga një deri në katër vlera. Tabela e mëposhtme rendit rregullat që rregullojnë reklama të tilla.

Pasi të keni studiuar me kujdes këtë tabelë, mund të kuptoni se rekordi më i shkurtër i stilit të kërkuar do të jetë si ky: rreze-kufi: 15px 0. Ka vetëm dy vlera.

Pak praktikë

Si të vizatoni një limon duke përdorur CSS.

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

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

Ne kemi vizatuar tashmë formën:

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

Kodi i trekëndëshit është si ky:

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

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. Ju mund të krijoni efekte të ndryshme për një perceptim më të mirë të përmbajtjes 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 me emër specifik ngjyrat ose në Formati 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. Ai tregon se si mund të përdoren për të krijuar: pseudo-klasa hover dhe kufiri CSS efekte të thjeshta(për shembull, për një menu).

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është vendosur transparenca (numri 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ë, ne e kërkuam atë përshkrim uniform kufiri.

Sintaksa CSS gjerësia e kufirit

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ër krijimin korniza të bukura përdorin pronën Rrezja kufitare CSS(e disponueshme vetëm në CSS3). Me të mund të rrumbullakoni qoshet, gjë që krijon një pamje krejtësisht të ndryshme. për shembull

7. Rreshti i prerë CSS

Vijat e prera mund të duken spektakolare sfond i errët, e cila nuk është e përshtatshme për çdo faqe.

---

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Ë:

Një nga aplikacionet argëtuese të vetive të hijes së kutisë CSS3 është krijimi kornizë e dyfishtë rreth elementit. Shumë efekt interesant për dekorimin e faqeve, por do të funksionojë vetëm në versionet më të reja të shfletuesve që mbështesin box-shadow.

Megjithatë, ka disa mënyra të tjera për të krijuar këtë efekt. Për më tepër, përdorimi i dukshëm imazhi i sfonditështë larg idealit.

V këtë mësim paraqet pesë metoda për krijimin e një kufiri të dyfishtë rreth një elementi. Dhe vetëm njëri prej tyre kërkon një imazh, dhe të gjithë të tjerët përdorin kod të pastër CSS me mbështetje të shkëlqyeshme në shfletues.

Metoda 1: kufiri dhe skica

Kjo metodë funksionon vetëm në shfletues që mbështesin vetinë e përshkrimit (të gjithë përveç IE6 / 7). Ju shtoni elementit edhe vetitë e kufirit dhe të konturit.

Një (kufiri: solid 6px #fff; skicë: solid 6px # 888;)

Arsyeja pse kjo metodë funksionon është sepse korniza e konturit gjithmonë vizatohet në pjesën e jashtme të drejtkëndëshit. Problemi me vetinë e skicës ndodh kur përdoren elementë lundrues, pasi kufiri mbivendoset me elementët ngjitur.

Metoda 2: pseudo element

Kjo metodë kërkon pozicionim absolut kornizë:

Dy (kufiri: solid 6px #fff; pozicioni: relative; z-indeksi: 1;) .dy: përpara (përmbajtja: ""; shfaqja: bllok; pozicioni: absolut; lart: -12 px; majtas: -12 px; kufiri: 6 px të ngurta # 888; gjerësia: 312 px; mbushja e poshtme: 12 px; lartësia min: 100%; indeksi z: 10;)

Pikat kryesore janë vendosja e vetive z-indeks (në mënyrë që elementi pseudo të mbivendoset me përmbajtjen), pozicionimi dhe vlera min-lartësia. Vetia e fundit ruan elasticitetin e kornizës.

Metoda 3: hije

Shumica metoda më e mirë pasi që merr vetëm një rresht kodi me cilësimet e vetive box-shadow.

Tre (hije kutie: 0 0 0 6px #fff, 0 0 0 12px # 888;)

Dy hije përdoren për të krijuar një kufi të dyfishtë. Ato ndahen me presje. Turbullimi është vendosur në 0. Meqenëse hija e dytë mbivendoset me të parën, ajo ka dyfishin e gjerësinë. Moment kyç- përdorimi i ngjyrave opake, të cilat krijojnë një kufi të qartë midis kornizave.

Ashtu si vetia e skicës, kuti-hija nuk ka asnjë efekt në elementet ngjitur dhe mund t'i mbivendosin ato. Prandaj, duhet të vendosni fushën për formimin pamjen kompozime.

Natyrisht, mbështetja për veçorinë box-shadow është e kufizuar në shfletues më të rinj.

Metoda 4: elementi shtesë div

V kjo metodë përdorur nga element i jashtëm