Vetia universale e kufirit ju lejon të vendosni njëkohësisht gjerësinë, stilin dhe ngjyrën e kufirit rreth një elementi. Vlerat mund të shkojnë në çdo mënyrë, të ndara nga një hapësirë, shfletuesi do të përcaktojë se cila korrespondon me pronën e dëshiruar. Për të vendosur një kufi vetëm në anët e caktuara të një elementi, përdorni veçoritë border-lart, border-bottom, border-left, border-right.
Vlera e gjerësisë së kufirit përcakton gjerësinë e kufirit. Janë dhënë disa vlera të stilit kufitar për të kontrolluar pamjen e saj. Emrat e tyre dhe rezultati i veprimit janë paraqitur në Fig. 1.
Fig.1. Stilet e kornizës
border-color vendos ngjyrën e kufirit, vlera mund të jetë në çdo format të vlefshëm CSS.
inherit trashëgon vlerën e prindit.
HTML5 CSS2.1 IE Cr Op Sa Fx
Në këtë shembull, një kufi i dyfishtë shtohet rreth shtresës. Rezultati është treguar në fig. 2.
Oriz. 2. Zbatimi i pasurisë kufitare
document.getElementById("elementID").style.border
Internet Explorer deri dhe duke përfshirë versionin 6 paraqitet me pika me pika me një gjerësi kufiri prej 1 px. Në 2px dhe më lart, vlera me pika funksionon si duhet. Ky gabim është rregulluar në IE7, por vetëm për të gjitha kufijtë 1px. Nëse njëri prej kufijve të kutisë është 2 px ose më i trashë, atëherë pikat bëhen të ndërprera në IE7.
Internet Explorer deri në versionin 7.0 nuk e mbështet vlerën trashëgimore.
Stili i kufirit mund të ndryshojë pak ndërmjet shfletuesve kur përdorni vlerat brazdë , kreshtë , futje ose fillim .
Vetia e përgjithshme e kufirit përdoret për të kontrolluar kufirin e një elementi. 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 (gjerësia, stili dhe ngjyra e kufirit) mund të vendosen në një deklaratë të vetme. Këtu është një shembull:
Ju mund të specifikoni vetëm një stil kufiri 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 trashësinë, stilin dhe ngjyrën e vet të kufirit.
Konsideroni përdorimin e CSS për të krijuar 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.
Le të shqyrtojmë secilën nga vlerat veç e veç.
Vetia e stilit kufitar vendos stilin e kufirit. Në CSS, ndryshe nga HTML, kufiri i një elementi mund të jetë më shumë sesa thjesht i fortë. Vlerat e vlefshme për stilin e kufirit janë:
Shembuj se si duken.
pa kufi (asnjë)
kufi i fortë (i ngurtë)
kufi i dyfishtë (i dyfishtë)
kufi me pika (me pika)
kufiri me pika (i ndërprerë)
kufiri i brazdës (groove)
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 rezultatin e mëposhtëm.
Një bllok div me një kufi të zi dhe stil kreshtë.
Kufiri duket si i fortë, por kjo ndodh sepse stili i kreshtës krijohet duke shtuar një efekt hije të zezë dhe efekti i zi në kufirin e zi nuk është i dukshëm.
Me ndihmën e veçorisë së 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 të njëjtën 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 dy pika) - 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 nga lart.
Vetia border-width përdoret për të vendosur gjerë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 vetia e stilit kufitar, vetia mund të vendoset gjithashtu në një deri në katër vlera. Konsideroni 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 në total:
Trashësia e kufirit: e hollë.
Trashësia e kufirit: e mesme.
Trashësia e kufirit: e trashë.
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 ndonjë nga metodat e përshkruara në artikullin Ngjyrat në CSS, përkatësisht:
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 në detyrën e shprehur më lart dhe të vizatojmë një figurë:
Këtu është kodi që vizaton një formë të tillë, vetëm më e madhe:
Siç u përmend më lart, ju mund të specifikoni vetëm vlerat e pronës kufitare për njërën anë të një blloku. Për këto qëllime, ekzistojnë prona:
Më lejoni t'ju kujtoj se për të gjitha pronat, tre vlera janë të specifikuara (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-lart ).
Opsionet e kufirit të djathtë (kufi-djathtas).
Opsionet e kufirit të poshtëm (border-bottom ).
Opsionet e kufirit të majtë (kufi-majtas).
Një shembull i përdorimit të këtyre vetive:
Vetia border-radius është për rrumbullakimin e qosheve të kufijve të një elementi. Kjo veçori u prezantua në CSS3 dhe funksionon saktë në të gjithë shfletuesit modernë, përveç Internet Explorer 8 (dhe versionet më të vjetra).
Vlerat mund të jenë çdo numër i përdorur në CSS.
kufiri i pronës: 15px.
Nëse korniza e bllokut nuk është vendosur, atëherë rrumbullakimi ndodh me sfondin. Këtu është një shembull i rrumbullakimit të bllokut pa një kufi, por me një ngjyrë sfondi:
kufiri i pronës: 15px.
Ka veti për rrumbullakimin e çdo cepi individual të një elementi. Ky shembull i përdor të gjitha:
kufiri-lart-majtas-rreze: 15px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 15px; kufiri-poshtë-majtas-rrezja: 0;
kufiri i pronës: 15px.
Edhe pse ky kod mund të shkruhet në një deklaratë: border-radius : 15px 0 15px 0 . Fakti është se për pronën e rrezes kufitare, mund të vendosni nga një deri në katër vlera. Tabela e mëposhtme përmbledh rregullat që rregullojnë deklarata të tilla.
Duke studiuar me kujdes këtë tabelë, mund të kuptoni se hyrja më e shkurtër për stilin e dëshiruar do të jetë: border-radius : 15px 0 . Ka vetëm dy vlera.
Vizatoni një limon 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;
Përshëndetje, të dashur lexues të faqes së blogut! Sot ne do të vazhdojmë studimin tonë të fletëve të stilit Cascading ose CSS. Në artikujt e mëparshëm, ne kemi konsideruar tashmë në terma të përgjithshëm paraqitjen e bllokut të faqes. Si rezultat, filluam të merrnim faqe interneti mjaft profesionale, por atyre u mungon diçka. Dhe ka shumë të ngjarë që atyre u mungojnë dhëmbëzat dhe kornizat. Sot do t'i hedhim një vështrim rregullave të stilit të kufirit, mbushjes dhe kufirit që ju lejojnë të vendosni mbushjen dhe kufijtë për elementët html.
Me fletët e stilit Cascading, ekzistojnë dy lloje të dhëmbëzimit.
1.Indentështë distanca nga kufiri imagjinar i elementit deri në përmbajtjen e tij. Vlera e distancës vendoset duke përdorur parametrin mbushje. Një indent i tillë i përket vetë elementit dhe ndodhet brenda tij.
2. Mbushje e jashtme- distanca midis kufirit të elementit aktual të faqes së internetit dhe kufijve të elementeve fqinjë, ose elementit prind. Madhësia e distancës kontrollohet nga prona diferencë. Kjo mbushje është jashtë elementit.
Foto për qartësi:
Për shembull, merrni parasysh një qelizë të mbushur me tekst. Pastaj mbushja është distanca midis kufirit imagjinar të qelizës dhe tekstit që përmban. Dhe indenti i jashtëm është distanca midis kufijve të qelizave fqinje. Le të fillojmë me dhëmbëza.
Vetitë e stilit padding-left, padding-top, padding-right dhe padding-bottom ju lejojnë të vendosni vlerat e mbushjes për pjesën e majtë, të sipërme, të djathtë dhe të poshtme të një elementi të faqes së internetit, përkatësisht:
mbushje e sipërme | mbushje djathtas | mbushje-fund | padding-left: vlera | interesi | trashëgojnë
Sasia e mbushjes mund të specifikohet në piksel (px), përqindje (%) ose njësi të tjera të pranueshme CSS. Kur specifikoni përqindjet, vlera llogaritet nga gjerësia e elementit. Vlera e trashëguar tregon se është trashëguar nga prindi.
Për shembull, për paragrafin aktual, unë aplikova një rregull stili që specifikon një dhëmbëzim majtas prej 20 pikselësh, një dhëmbëzim në krye prej 5 pikselë, një dhëmbëzim djathtas prej 35 px dhe një fund prej 10 px. Hyrja e rregullave do të duket kështu:
p.test(
mbushje-majtas:20px;
padding-top:5px;
mbushje-djathtas:35px;
mbushje-fund: 10 px
}
Rregulli i mbushjes së parafabrikuar ju lejon të specifikoni hyrjet në të gjitha anët e një elementi të faqes në internet menjëherë:
mbushje:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Lejohet përdorimi i një, dy, tre ose katër vlerash në një rregull të parafabrikuar, duke i ndarë ato me një hapësirë. Në këtë rast, efekti varet nga numri i vlerave:
Kështu, rregulli CSS i mësipërm mund të shkurtohet sa më shumë që të jetë e mundur dhe të shkruhet si më poshtë:
p.test (mbushje: 5px 35px 10px 20px)
Atributet e stilit margin-left, margin-lart, margin-right dhe margin-bottom ju lejojnë të caktoni sasinë e marzhit majtas, lart, djathtas dhe poshtë, respektivisht:
margjina e sipërme | margjina djathtas | marzh-fund | margjina e majtë:<значение>|auto|trashëgojë
Siç u përmend më lart, marzhi është distanca nga kufiri i elementit aktual në kufirin e elementit fqinj, ose, nëse nuk ka elementë fqinjë, në kufirin e brendshëm të kontejnerit mëmë.
Sasia e mbushjes mund të specifikohet në piksel (px), përqindje (%) ose njësi të tjera të pranueshme CSS:
p(
margjina-majtas: 20px;
}
h1(
marzh-djathtas:15%;
}
Vlera automatike do të thotë që mbushja do të llogaritet automatikisht nga shfletuesi. Në rastin e përdorimit të shënimit të përqindjes, dhëmbëzimi llogaritet në varësi të gjerësia e enës mëmë. Dhe kjo vlen jo vetëm për margjinën-majtas dhe margjinën-djathtas, por edhe për margjinën-lart dhe margjinën-poshtë, përqindja e mbushjes do të llogaritet në varësi të gjerësisë, jo lartësisë së kontejnerit.
Lejohet të përdoret si vlera e indenteve të jashtme vlerat negative:
p(
margjina-majtas:-20px;
}
Nëse, me vlera pozitive të indenteve, elementët fqinjë largohen, atëherë me një vlerë negative, blloku fqinj do të kalojë mbi elementin për të cilin kemi vendosur një indent kaq negativ.
Ne gjithashtu mund të specifikojmë kufijtë duke përdorur atributin stil. diferencë. Ai vendos vlerat e indenteve njëkohësisht në të gjitha anët e elementit të faqes së internetit:
marzhi:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Kjo veti, në rastin e vendosjes së një, dy, tre ose katër vlerave të mbushjes, u bindet të njëjtave ligje si rregulli i mbushjes.
Ekzistojnë tre lloje opsionesh kur vendosni kornizat:
Le të fillojmë me parametrin e trashësisë së kufirit:
gjerësia e kufirit: [vlera | i hollë | e mesme | trashë] (1,4) | trashëgojnë
trashësia e kornizës mund të vendoset në pixel, ose në njësi të tjera të disponueshme në css. Variablat e hollë, të mesëm dhe të trashë vendosin trashësinë e kufirit në 2, 4 dhe 6 piksele, përkatësisht:
gjerësia e kufirit: e mesme;
Ashtu si me vetitë e mbushjes dhe margjinës, një, dy, tre ose katër vlera lejohen për parametrin e gjerësisë së kufirit, duke vendosur kështu gjerësinë e kufirit për të gjitha anët menjëherë ose për secilën veç e veç:
gjerësia e kufirit: 5px 3px 5px 3px
Për paragrafin aktual, do ta bëjmë trashësinë e kufirit të sipërm 1px, djathtas 2px, 3px poshtë dhe 4px majtas duke përdorur rregullin (gjerësia e kufirit: 1px 2px 3px 4px;)
Atributet e stilit border-left-width, border-lart-width, border-right-width dhe border-bottom-width mund të përdoren për të vendosur trashësinë e anës së majtë, të sipërme, të djathtë dhe të poshtme të kufirit, përkatësisht :
kufiri-majtë-gjerësi|border-lartë-gjerësi|border-djathtas-gjerësi|border-poshtë-gjerësi: i hollë|mesatar|i trashë|<толщина>|trashëgojnë
Parametri tjetër është ngjyra e kufirit me të cilën mund të kontrolloni ngjyra e kornizës:
kufiri-ngjyra: [ngjyra | transparent](1,4) | trashëgojnë
Vetia ju lejon të vendosni ngjyrën e kornizës për të gjitha anët e elementit menjëherë ose vetëm për ato të specifikuara. Si vlerë, mund të përdorni metodat e vendosjes së tyre të pranuara në html për ngjyrat: kodi heksadecimal, fjalë kyçe, etj.:
p (gjerësia e kufirit: 2 px; ngjyra e kufirit: e kuqe)
Vlera transparente vendos ngjyrën transparente të kufirit, dhe trashëgimi trashëgon vlerën e prindit. Si parazgjedhje, nëse ngjyra e kufirit nuk është vendosur, atëherë do të përdoret ajo e përdorur për fontin brenda elementit të dhënë.
Atributet e stilit të kufirit-left-color, border-top-color, border-right-color dhe border-bottom-color vendosin ngjyrën e anës së majtë, të sipërme, të djathtë dhe të poshtme të kufirit, përkatësisht:
border-left-color|border-top-color|border-djathtas-color|border-the-bottom-ngjyra: transparente|<цвет>|trashëgojnë
Dhe parametri i fundit vendoset në stilin e kufirit lloji i kornizës:
kufiri-style: (1,4) | trashëgojnë
Lloji i kornizës mund të specifikohet për të gjitha anët e elementit menjëherë ose vetëm për ato të specifikuara. Shumë fjalë kyçe mund të përdoren si vlera. Pamja do të varet nga shfletuesi që po përdorni dhe trashësia e kornizës. Kuptimi asnje përdoret si parazgjedhje dhe nuk shfaq një kornizë dhe trashësia e saj është vendosur në zero. Vlera e fshehur ka të njëjtin efekt. Korniza që rezulton për vlerat e mbetura, në varësi të trashësisë, tregohet në tabelën më poshtë:
Atributet e stilit të kufirit të majtë , të stilit të sipërm të kufirit, të stilit të kufirit djathtas dhe të stilit kufitar të poshtëm vendosin stilin e linjave që do të përdoren për të vizatuar anët e majta, të sipërme, të djathta dhe të poshtme të kornizës , respektivisht:
kufiri-left-style|border-top-style|border-right-style|border-bottom-style: asnjë|fshehur|me pika|të ndërprera|të ngurta|dyshe|groove|kreshtë|hyrje|fillim|trashëgim
Ashtu si me opsionet e diferencës dhe mbushjes, kufiri ka kufiri i përgjithshëm i pronës. Kjo ju lejon të vendosni njëkohësisht trashësinë, stilin dhe ngjyrën e kufirit rreth një elementi:
kufiri: | trashëgojnë
Vlerat mund të jenë në çdo mënyrë, të ndara me hapësira:
td (kufiri: 1px e verdhë e fortë)
Për të vendosur një kufi vetëm në anët e caktuara të një elementi, ka veti kufiri-lart, kufiri-poshtë, kufiri-majtas, kufiri-djathtas, të cilat ju lejojnë të vendosni parametrat për anët e sipërme, të poshtme, të majta dhe të djathta të kufijtë, përkatësisht.
Mbetet vetëm për të përmbledhur:
Vërej se të gjitha këto veti css rrisin madhësinë e elementit të faqes së internetit. Prandaj, nëse ndryshojmë trashësinë e kufirit ose madhësinë e mbushjes së kontejnerëve të bllokut që formojnë dizajnin e faqes së internetit, atëherë do të duhet të ndryshojmë madhësinë e këtyre kontejnerëve në përputhje me rrethanat, përndryshe ato mund të lëvizin dhe dizajni do të prishet.
Kjo është e gjitha, shihemi së shpejti!
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ë e gjithanshme, si dhe skicimi dhe, çuditërisht, kuti-hije , detyra kryesore e së cilës është krijimi i një hije. Le të hedhim një vështrim në këto metoda dhe dallimet e tyre.
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:
Shtrohet pyetja - në cilat raste nevojitet skica, kur rolin e saj, pavarësisht dallimeve të listuara, e merr plotësisht kufiri? Nuk ka shumë situata, por ato ndodhin:
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.
Shembulli 1: Krijo një kornizë
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. Kufiri rreth elementit
Shtimi i një kufiri përtej kufirit rrit gjerësinë e elementit, e cila është mjaft e dukshme kur kombinohet kufiri dhe pseudo-klasa :hover. Ka dy mënyra për të "fituar". Më e thjeshta është zëvendësimi i kufirit me një skicë, e cila e dimë se nuk ka asnjë efekt në madhësinë e elementit (shembulli 2).
Shembulli 2: Kornizë në lëvizje
skica nuk është gjithmonë e përshtatshme, vetëm sepse nuk ndikohet nga qoshet e rrumbullakosura. Metoda e dytë është e përshtatshme këtu - shtoni një kufi të padukshëm ose një kufi që përputhet me ngjyrën e sfondit dhe më pas ndryshoni parametrat e tij kur rri pezull (shembulli 3). Atëherë nuk do të ndodhë asnjë zhvendosje e elementit, pasi korniza është tashmë aty fillimisht. Por mbani mend gjithmonë se gjerësia e elementit është shuma e vlerave të gjerësisë, kufirit në të majtë dhe kufirit në të djathtë. E njëjta gjë është e vërtetë me lartësinë.
Shembulli 3: Korniza në rri pezull
Në disa shfletues (Chrome, Safari, versionet e fundit të Opera), një kufi i vogël me ngjyra shfaqet rreth fushave të formularit kur ato marrin fokusin (Fig. 2). Për ta hequr atë, mjafton të shtoni vlerën none në vetinë e skicës në stile, siç tregohet në shembullin 4.
Oriz. 2. Kornizë rreth fushave
Shembulli 4. Hiqni kornizën
Megjithëse vetia box-shadow synon të shtojë një hije rreth një elementi, ajo mund të përdoret gjithashtu për të krijuar kufij, dhe ato që nuk mund të bëhen me 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ë 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ë këtë rast është përgjegjës për trashësinë e kufirit, dhe i pesti përcakton ngjyrën e kornizës. 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 kuti dhe një kufi në të djathtë duke përdorur një veti të vetme hije kuti.
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
Vetia e kufirit CSS përshtatet për të krijuar kufirin e një objekti, domethënë për trashësinë e kufirit, për 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ë faqeje, menu, etj.
kufiri: kufiri me gjerësi kufiri në stilin e kufirit me ngjyrë | trashëgojnë;
Vlerat në pronën e kufirit CSS mund të vendosen në çdo mënyrë. Sekuenca më e përdorur është "ngjyra e stilit të trashësisë".
stili kufitar: i ndërprerëstili kufitar: i ndërprerëkufiri-style: i ngurtëkufiri-style: dyfishtëkufi-style: brazdëkufi-style: kurrizkufiri-style: futurkufiri-style: fillimiKatër korniza të ndryshme
kufiri-style: me pika
stili kufitar: i ndërprerë
kufiri-style: i ngurtë
kufiri-style: dyfishtë
kufi-style: brazdë
kufi-style: kurriz
kufiri-style: futur
kufiri-style: fillimi
Katër korniza të ndryshme
Ky shembull është shumë i thjeshtë por interesant. Tregon se si mund të përdorni pseudo-klasën :hover dhe kufirin CSS për të krijuar efekte të thjeshta (si menytë).
Kur kaloni miun mbi bllok, ngjyra e kornizës do të ndryshojë.
Ja se si duket në faqe:
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 RGBA (R, G, B, P), ku parametri i fundit është transparenca (numri real nga 0.0 në 1.0)
Ja se si duket në faqe:
Përcakton trashësinë e vijës. Më parë, ne e vendosëm atë në një përshkrim të vetëm kufiri.
Sintaksa CSS
gjerësia e kufirit: i hollë | e mesme | trashë | kuptimi;
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 mesmegjerësia e kufirit: e trashëTrashësi të ndryshme në kufij
Ja se si 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
Vetia e kufirit CSS ka vetitë e derivuara për vendosjen e kufijve të njëanshëm në një element:
Këta kufij mund të kombinohen, d.m.th. shkruani një kornizë për çdo drejtim. Sintaksa është saktësisht e njëjtë si për kufirin.
Ka edhe prona
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: */
Shembull i kornizës së citatit
Ja se si duket në faqe:
Shembull i kornizës së citatit
shënim
Ju mund të vendosni një kufi të veçantë për secilën anë.
Ndonjëherë ju duhet të bëni kufij të shumtë. Le të japim një shembull
Ja se si duket në faqe:
Ekziston një mënyrë e dytë përmes mbivendosjes së hijeve.
Ja se si duket në faqe:
Për të krijuar kufij të bukur, përdorni veçorinë CSS border-radius (e disponueshme vetëm në CSS3). Me të, ju mund të bëni qoshe të rrumbullakosura, gjë që krijon një pamje krejtësisht të ndryshme. Për shembull
Linjat e stampuara mund të duken spektakolare në një sfond të errët, i cili nuk është i përshtatshëm për çdo vend.
Ja se si duket në faqe:
Për të hyrë në kufirin nga JavaScript, duhet të shkruani konstruksionin e mëposhtëm:
dokument.getElementById("elementID").style.border="VALUE "(! GJUHË:
