Jam i sigurt që tashmë jeni njohur me vetinë e kufirit css. A do të mësoni diçka të re që nuk e dinit më parë për kufirin css? Epo, jo vetëm që do të mësoni, por do të shihni edhe disa gjëra të reja që nuk i keni ditur kurrë më parë!
Jo vetëm CSS3 mund të përdoret për të rrumbullakosur qoshet, por kodi i pastër CSS mund të përdoret gjithashtu për të krijuar forma komplekse. Më parë, mund të përdorni imazhin e sfondit për të dhënë përshtypjen e qosheve të rrumbullakosura. Falë teknikave të reja të kufirit, ne mund ta bëjmë këtë në CSS të pastër.
Bazat e përdorimit të kufijve css
Ju ndoshta jeni njohur tashmë me përdorim standard Karakteristikat e kufirit:
Kufiri: 1px i zi;
Kodi i mësipërm do të japë një kufi 1px që do të jetë i zi. Thjesht dhe lehtë. Ju gjithashtu mund të zgjeroni pak sintaksën:
gjerësia e kufirit: e trashë; kufiri-style: solid ngjyra e kufirit: e zezë
Si shtesë, mund të përdoren vlera specifike vetitë kufitare- gjerësi, tre fjalë kyçe a: i hollë, i mesëm, i trashë.
Por përdorimi i sintaksës së zgjeruar nuk është gjithmonë praktik. Le të shohim një shembull ku dëshironi të ndryshoni ngjyrën e kufirit të bllokut kur rri pezull mbi të. Në një rast të tillë, përdorimi i sintaksës së stenografisë është shumë më i lehtë:
Kutia (kufi: 1px e kuqe e fortë; ) .kutia:rhiq (kufi: 1px jeshile e fortë; )
Më elegante dhe më e thjeshtë mund të bëhet si kjo:
Kutia (kufi: 1px e kuqe e fortë; ) .kutia:rhiq (ngjyra e kufirit: jeshile; )
Siç mund ta shihni, teknika e avancuar është gjithashtu e dobishme kur ne ndryshojmë vetëm disa veti: gjerësinë, stilin, ngjyrën dhe të tjera.
kufi-rrezja
kufiri-rrezeështë vetia "e artë" e CSS3 - prona e parë, më e zakonshme që është bërë praktike dhe e dobishme. Duke përjashtuar IE8 dhe më poshtë, të gjithë shfletuesit shfaqin kënde të rrumbullakosura me këtë.
Edhe pse, është e nevojshme të përdoren parashtesa të veçanta për Webkit dhe Mozilla që stili të jetë i saktë.
webkit-border-radius: 10px; -moz-border-radius: 10px; kufiri-rreze: 10px
Në ditët e sotme, ne mund të heqim prefikset speciale dhe të përdorim formën standarde të rrezes kufitare.
Një përfitim tjetër është se ne mund të përdorim vlera të veçanta për secilën anë të bllokut:
kufiri-lart-majtë-rrezja: 20px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 30px; kufiri-poshtë-majtas-rreze: 0;
Në kodin e mësipërm, duke vendosur rreze-bord-lart-djathtas-radius dhe border-bottom-left-radius në "zero", mund të arrihen forma të mahnitshme. Edhe pse elementi mund të trashëgojë disa veti që do të duhet të anulohen.
Ashtu si kufiri dhe mbushja, ne mund të kondensojmë sintaksën:
/* lart majtas lart djathtas, poshtë djathtas, poshtë majtas */ kufiri-radius: 20px 0 30px 0;
Si shembull, duke përdorur veçorinë e rrezes kufitare, unë do t'ju tregoj një "limon" që dizajnerët përdorin shpesh kur shtrojnë faqet e internetit:
Limon (gjerësia: 200 px; lartësia: 200 px; sfondi: #F5F240; kufiri: 1 px solid #F0D900; rrezja e kufirit: 10 px 150 px 30 px 150 px; )
Duke shkuar përtej bazave
Në shumë stilistë, të gjitha njohuritë në këtë fushë vetitë css kufiri, ja ku mbaron. Por ka edhe disa të tjera gjëra të ftohta me të cilat mund të krijoni gjëra të mrekullueshme!
Struktura komplekse kufitare css
Ka shumë teknika për projektimin e strukturave komplekse kufitare. Për shembull, merrni parasysh sa vijon...
të stilit kufitar
Ne përdorim gjithmonë vetitë më të famshme të ngurta, të prera dhe me pika. Por ka disa prona të tjera të stilit kufitar: brazdë dhe kurriz.
Kufiri: brazdë 20 px #e3e3e3;
Ose në sintaksë të zgjeruar:
kufiri-ngjyra: #e3e3e3; gjerësia e kufirit: 20 px kufiri-style: brazdë;
Megjithëse këto veti janë të dobishme, ato nuk janë baza për krijimin e kornizave komplekse.
përvijojnë
Teknika më e popullarizuar e kufirit të dyfishtë është përdorimi i vetive të skicës.
Kutia (kufi: 5px solid #292929; skicë: 5px solid #e3e3e3; )
Kjo metodë funksionon mirë, megjithëse na kufizon vetëm në dy korniza. Ndonjëherë ju duhet të krijoni një kufi gradient që përbëhet nga shumë shtresa... si atëherë?
Pseudo elemente
Kur teknika e skicës nuk është e mjaftueshme, ilaç alternativështë përdorimi i elementeve pseudo :para dhe :pas. Me të cilin mund të shtoni kufij shtesë në element:
Kutia ( gjerësia: 200 px; lartësia: 200 px; sfondi: #e3e3e3; pozicioni: relative; kufiri: 10 px jeshile; ) /* Krijo dy kuti me gjerësia e njëjtë e kontejnerit */ .box:after, .box:para (përmbajtja: ""; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; ) .box:after (kufi: 5px e kuqe e fortë; skica: 5px e verdhë e fortë; ) .kutia:përpara (kufi: 10px blu e fortë; )
Nuk duket shumë elegante, por të paktën, punon. Është pak problematike të merresh me sekuencën e ngjyrave brenda ... por mund ta kuptosh.
Hije kutie
Një mënyrë interesante "fëminore" për të krijuar këtë efekt është përdorimi i vetive CSS3 box-shadow:
Kutia (kufi: 5px e kuqe e fortë; kuti-hije: 0 0 0 5px jeshile, 0 0 0 10px e verdhë, 0 0 0 15px portokalli; )
Në këtë rast, ne ishim më të zgjuar, duke përdorur veçorinë e dedikuar kuti-hije. Duke ndryshuar parametrat x, y, blur në zero, ne mund të përdorim ngjyra të ndryshme për të krijuar korniza të shumta.
Por ka një problem, në shfletuesit e vjetër që nuk e kuptojnë vetinë e hijes së kutisë, do të jetë e dukshme vetëm një kufi i kuq 5 pikselë.
“Mos harroni! Dizajni i faqes duhet të duket ndër-shfletues, domethënë i njëjtë në të gjithë shfletuesit. Përfshirë versionet më të vjetra.
Ndryshimi i këndeve
Përveç atij të përdorur kuptim i thjeshtë kufi-radius, mund të specifikojmë dy të veçanta - duke i ndarë me / do të specifikojmë rrezen horizontale dhe vertikale.
Për shembull:
Rrezja kufitare: 50 px / 100 px /* rrezja horizontale, rrezja vertikale */
... kjo është e barabartë me:
Rrezja e kufirit-lart-majtas: 50px 100px; kufiri-lart-djathtas-rreze: 50px 100px; kufiri-poshtë-djathtas-rreze: 50px 100px; kufiri-poshtë-majtas-rreze: 50px 100px;
Kjo teknikë është e përshtatshme për krijimin e formave unike të bllokut. Për shembull, ja se si të krijoni një efekt letre të mbështjellë:
Kutia (gjerësia: 200 pikselë; lartësia: 200 pikselë; sfondi: #666; rrezja e kufirit-lart-majtas: 15em 1em; kufiri-poshtë-djathtas-rreze: 15em 1em; )
Format CSS duke përdorur kufirin
Kjo teknikë tregon se si mund të krijoni forma css duke përdorur elementë me dimensione zero lartësi dhe gjerësi. I befasuar? Le të shohim një shembull ...
Për disa shembuj të ardhshëm, ne do të përdorim shënimin e mëposhtëm:
…dhe stilin bazë të mëposhtëm:
Kutia (gjerësia: 200 px; lartësia: 200 px; sfondi: i zi; )
Shembulli më i zakonshëm Përdorimi i CSS forma - duke krijuar një shigjetë që rrjedh. Sekreti i kësaj shigjete qëndron në krijimin e një kufiri me ngjyra të ndryshme për secilën anë. Më pas vendosim atributet e gjerësisë dhe lartësia deri në 0.
Le të caktojmë klasën e shigjetave në bllokun div:
Shigjeta (gjerësia: 0; lartësia: 0; kufiri-lart: 100 pikselë e kuqe e fortë; kufiri-djathtas: 100 pikselë jeshile e fortë; kufiri-poshtë: 100 pikselë blu e fortë; kufiri majtas: 100 pikselë e verdhë e fortë; )
Për të demonstruar, ne fillimisht përdorim sintaksën e zgjeruar. Më pas, ne mund të heqim kod shtesë, duke përdorur sintaksën e stenografisë:
Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë; )
Interesante, apo jo? Tani do të vendosim ngjyra transparente në të gjitha anët, përveç anës blu.
Shigjeta (gjerësia: 0; lartësia: 0; kufiri: 100 px solid; kufiri-fund-ngjyra: blu; )
Ka funksionuar shkëlqyeshëm! Por kjo bie ndesh paraqitjen semantike, krijoni një div .shigjeta, vetëm për të shtuar një shigjetë në faqe. Për këtë qëllim, ne mund të përdorim pseudo-elemente, të cilat do ta bëjmë tani.
Krijo një flluskë të folur
Për të krijuar një flluskë të folur, na duhet një pjesë e vogël CSS e pastër kod dhe një bllok div.
Flluskë e të folurit ( pozicioni: relative; ngjyra e sfondit: #292929; gjerësia: 200 px; lartësia: 150 px; lartësia e rreshtit: 150 px; /* vertikalisht në qendër */ ngjyra: e bardhë; rreshtimi i tekstit: në qendër; )
Flluskë e të folurit:pas (përmbajtja: ""; )
Në këtë pikë, ne do të krijojmë shigjetën që bëmë më parë, do ta shtojmë atë në element dhe gjithçka që mbetet për të bërë është ta pozicionojmë atë:
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 10 px solid; ngjyra e kufirit: e kuqe jeshile blu e verdhë; )
Nëse duam që shigjeta të tregojë poshtë, do të duhet t'i vendosim të gjithë kufijtë në transparent, përveç atij të sipërm.
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolut; gjerësia: 0; lartësia: 0; kufiri: 10 pikselë; ngjyra e skajit sipër: e kuqe; )
Kur e krijojmë këtë Formulari CSS, nuk mund të specifikojmë në mënyrë specifike madhësinë e shigjetës. Në vend të kësaj, ne mund të vendosim veçorinë e gjerësisë së kufirit, e cila do të vendosë madhësinë e shigjetës. Ne gjithashtu do të vendosim pozicionin e shigjetës në mes të poshtëm. Prandaj, ne përdorim vlerat e sipërme dhe të majta për këtë.
Flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 pikselë e fortë; kufiri-lart-ngjyra: e kuqe; lart: 100%; majtas: 50%; )
Përveç kësaj, na mbetet që të japim ngjyrën e njëjtë me atë të bllokut. Mos harroni, kur poziciononi, duhet të merrni parasysh madhësinë e kufijve të tjerë që janë të padukshëm (15 px). Ne gjithashtu do t'i japim bllokut rrumbullakimin në qoshe.
Flluskë e të folurit ( /* ... stile të tjera */ rreze-borde: 10 px; ) .flluskë e të folurit:pas (përmbajtja: ""; pozicioni: absolute; gjerësia: 0; lartësia: 0; kufiri: 15 pikselë e fortë; kufiri -lart -ngjyra: #292929; lart: 100%; majtas: 50%; margjina majtas: -15 px; /* rregullo për gjerësinë e kufirit */ )
Jo keq, a? Duke përdorur disa klasa css dhe truket kufitare, mund të krijoni një gjë të tillë.
/* Përdorimi i flluskave të të folurit: Aplikoni klasën .speech-bubble dhe .speech-bubble-DIRECTION siç tregohet më poshtë
Bonus! Përqendrimi vertikal brenda një blloku
Për një rresht të vetëm teksti, mund të përdoret lartësia e rreshtit. Por nëse keni dy ose më shumë linja teksti... zgjidhja më e mirë do të vendosë veçorinë e shfaqjes në tabelë dhe do ta vendosë të gjithë tekstin në një paragraf. Ja si duket shënimi html:
Flluskë e të folurit ( /* stile të tjera */ shfaqja: tabelë; ) .flluskë e të folurit p ( shfaqja: qeliza e tabelës; rreshtimi vertikal: në mes; )
Ne nuk jemi të kufizuar në trekëndësha. CSS është në gjendje të shfaqë forma të ndryshme - madje edhe zemra dhe një shenjë të rrezikut biologjik.
Rreziku biologjik ( gjerësia: 0; lartësia: 0; kufiri: 60 pikselë e ngurtë; rrezja e kufirit: 50%; ngjyra e skajit lart: e zezë; e kufirit-poshtë-ngjyra: e zezë; e kufirit-majtas-ngjyra: e verdhë; e kufirit-djathtas- ngjyra: e verdhe;)
konkluzioni
Për të kontrolluar kufirin e një elementi, përdorni pronë e përgjithshme 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 (gjerësia, stili dhe ngjyra e kufirit) mund të vendosen në një deklaratë të vetme. Këtu është 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 veçoritë 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 bllokut ka trashësinë, stilin dhe ngjyrën e saj të kufirit.
Mendoni se si 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 elementit mund të jetë çdo gjë tjetër përveçse solid. Vlerat e vlefshme për stilin e kufirit janë:
- asnjë - pa kufi (i parazgjedhur).
- kufi i fortë - solid.
- kufiri i dyfishtë - dyfish.
- kufiri i ndërprerë - me pika.
- me pika - një kufi i përbërë nga një seri pikash.
- kurriz - kufi "kresht".
- groove - kufi "groove".
- inset - kufi i futur.
- fillim - kufi i ekstruduar.
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ë në stil kufiri, 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.
Prona me gjerësi kufiri. Trashësia e kufirit.
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:
- 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 ndonjë nga metodat e përshkruara në artikullin Ngjyrat në CSS, përkatësisht:
- Shënimi heksadecimal (#ff00aa) i ngjyrës.
- Formati RGB është rgb (255,12,110). Formati RGBA për CSS3.
- Formatet HSL dhe HSLA për CSS3.
- Emri i ngjyrës, për shembull e zezë (e zezë). Lista e plotë Emrat e ngjyrave janë renditur në tabelën CSS Color Names.
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:
Vendosja e vlerave për anët veç e veç
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:
- kufiri i sipërm (kufiri i sipërm)
- kufiri-djathtas (kufiri i djathtë)
- kufiri i poshtëm (kufiri i poshtëm)
- kufiri-majtë (kufiri i majtë)
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 ).
- border-top-color - vendos ngjyrën e kufirit të sipërm të një elementi.
- border-top-width - vendos gjerësinë e kufirit të sipërm të një elementi.
- 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 gjerësinë e kufirit të djathtë të elementit.
- border-right-style - vendos stilin e kufirit të djathtë të elementit.
Opsionet e kufirit të poshtëm (border-bottom ).
- border-bottom-color - vendos ngjyrën e kufirit të poshtëm të një elementi.
- border-bottom-width - vendos gjerësinë e kufirit të poshtëm të një elementi.
- border-bottom-style - vendos stilin e kufirit të poshtëm të një elementi.
Opsionet e kufirit të majtë (kufitar-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:
- ripërcaktoi ngjyrën e kufirit të sipërm me veçorinë e kufirit-top-color në të kuqe,
- duke përdorur veçorinë border-right-width, trashësia e kufirit të djathtë vendoset në 10 px,
- duke përdorur veçorinë e stilit border-bottom, stili i kufirit të poshtëm ripërcaktohet si i dyfishtë,
- duke përdorur veçorinë e ngjyrës border-left-color, kufiri i majtë vendoset në blu.
Prona 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 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 rrumbullakosjes së 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-majtë-rrezja: 15px; kufiri-lart-djathtas-rreze: 0; kufiri-poshtë-djathtas-rreze: 15px; kufiri-poshtë-majtas-rreze: 0;
kufiri i pronës: 15px.
Edhe pse ky kod mund të shkruhet në një deklaratë: kufiri-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.
Pak praktikë
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 e bardhë; kufiri-fund-ngjyra: e kuqe;
Vetia e kufirit CSS rregullohet 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ë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 - gjerësia e kufirit. Mund ta vendosni në piksel (px) ose të përdorni vlerat standarde të hollë, të mesme, të trashë (ato ndryshojnë vetëm në gjerësinë e pikselit)
- border-style - stili i kornizës së dhënë. Mund të marrë vlerat e mëposhtme
- asnjë ose i fshehur - anulon kufirin
- me pika - kornizë me pika
- dash - kornizë dash
- vijë e fortë - e thjeshtë (përdoret më shpesh)
- dyfish- kornizë e dyfishtë
- groove - kufiri 3D me brazdë
- kurriz , futje , fillim - efekte të ndryshme të kornizës 3D
- trashëgoj - aplikohet vlera e elementit mëmë
- border-color - ngjyra e kufirit. Mund të specifikohet duke përdorur një emër specifik ngjyrash ose në formatin RGB (shih emrat e ngjyrave html për sitin)
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ë".
2. Shembuj me kufij të ndryshëm të kufirit CSS
2.1. Shembull. Stilet e ndryshme të kufirit të stilit kufitar
stil kufiri: i ndërprerëstil kufiri: i ndërprerëkufiri-style: solidkufiri-style: dyfishtëkufi-style: brazdëkufiri-style: kurrizkufiri-style: futurkufiri-style: fillimiKatër korniza të ndryshme
kufiri-style: me pika
kufiri-stili: i ndërprerë
kufiri-style: solid
kufiri-style: dyfishtë
kufiri-style: brazdë
kufiri-style: kurriz
kufiri-style: futur
kufiri-style: fillimi
Katër korniza të ndryshme
2.2. Shembull. Ndryshimi i ngjyrës së kufirit në lëvizje
Ky shembull është shumë i thjeshtë por interesant. Ai tregon se si mund të përdorni pseudo-klasën :hover dhe një kufi CSS për të krijuar efekte të thjeshta(për shembull, për menunë).
Kur kaloni miun mbi bllok, ngjyra e kornizës do të ndryshojë.
Ja se si 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 RGBA (R, G, B, P), ku parametri i funditështë vendosur transparenca (numri real nga 0.0 në 1.0)
Ja se si duket në faqe:
3. Trashësia e kufirit: vetia e gjerësisë së kufirit
Përcakton trashësinë e linjës. E kemi kërkuar më parë përshkrim i vetëm 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ë
- trashë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 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
4. Si të bëni një kornizë kufiri 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 e sipërm (kufiri i sipërm)
- border-bottom - për të vendosur kufirin e poshtëm (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. shkruani një kornizë për çdo drejtim. Sintaksa është saktësisht e njëjtë si për kufirin.
Ka edhe prona
- border-top-color - vendosni ngjyrën e kufirit të sipërm
- border-top-style - vendos stilin e kufirit të sipërm
- border-top-width - vendosni gjerë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ë jetë e njëjtë
/* Përshkrimi i dy stileve identike: */
4.1. Shembull. Kornizë e bukur për të theksuar kuotat
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ë.
5. Si të bëni kufij të shumtë 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ë
Ja se si duket në faqe:
Ekziston një mënyrë e dytë përmes mbivendosjes së hijeve.
5.2. Mbivendosni hijet për të krijuar kufij të shumëfishtë
Ja se si duket në faqe:
6. Rrumbullakimi i qosheve në kufij (rreze-kufi)
Për krijimin korniza të bukura 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
7. Linja e indentuar CSS
Linjat e stampuara mund të duken spektakolare sfond i errët, e cila nuk është e përshtatshme për çdo faqe.
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Ë:
16 qershor 2016
Pershendetje te gjitheve. Sot do t'ju tregoj pse, kur shtrojnë faqet, ata ndonjëherë bëjnë një kufi transparent në css, domethënë një kufi të padukshëm të elementit.
Pse keni nevojë për një kornizë transparente?
Gjatë paraqitjes së paraqitjes tjetër, ekzistonte një detyrë e tillë: kur rri pezull mbi një artikull të menysë, ai duhet të ketë një nënvizim. Dhe jo për tekstin, por për të gjithë bllokun me një lidhje. Për ata që kuptojnë paraqitjen, gjithçka është mjaft e thjeshtë dhe e kuptueshme në këtë rast. Thjesht duhet të shtoni veçorinë e kufirit në fund në lidhje kur rri pezull mbi të. Por nëse e bëni vetëm kështu, nuk do të jetë shumë e bukur dhe e mrekullueshme. Tani do t'ju tregoj një shembull. si kjo kodi html nevojshme për të krijuar menu e thjeshtë për 4 pikë:
Në përgjithësi, disa stile i janë përshkruar, por unë nuk do t'i jap të gjitha. Ne jemi të interesuar për efektin e nënvizimit kur rri pezull mbi një artikull. Ajo zbatohet si kjo:
Menyja është: rri pezull (kufiri-fund: 5px kafe e fortë; )
Gjithçka është mjaft e thjeshtë, por rezultati është ky (kaloni mbi çdo artikull):
Dakord, jo shumë bukur. Përveç kësaj, disa përmbajtje do të vendosen më poshtë dhe do të lëvizin 5 pikselë poshtë sa herë që ndodh pezullimi. Siç e dini, një kornizë rrit madhësinë e një elementi.
Në fakt, për të zgjidhur problemin, thjesht duhet të vendosni fillimisht lidhjen në të njëjtën kornizë me një trashësi prej 5 pikselësh, por ngjyrë transparente. Në këtë rast, kur rri pezull, vetëm ngjyra e kornizës do të ndryshojë.
Meny li a (kufiri-fund: 5px transparente e fortë;)
Unë dhashë vetëm një pronë, pjesa tjetër e stileve nuk na interesojnë, mund t'i përshkruani vetë. Tani, kur rri pezull, nuk do të ndodhë asnjë dridhje, mund të siguroheni për këtë:
E shkëlqyeshme, shpresoj t'i jam përgjigjur pyetjes, pse është e nevojshme në css kornizë transparente. Ndoshta ka ndonjë përdorim tjetër. Ose më mirë, nuk është e mundur, por patjetër. Mund të përdoret për të krijuar trekëndësha. Si, shikoni. Pra, këto janë opsionet për përdorimin e një kornize transparente.
