Lastnina CSS – « meja", omogoča nastavitev debeline, barve in vrste obodne črte okoli elementa. Parametri te lastnosti so lahko zapisani v eni vrstici, ločeni s presledkom, in v poljubnem vrstnem redu.

• - debelina črte en piksel
• - polna črta
• - Bela barva
• - črna barva
• - siva barva

Polna obroba elementa

Obroba elementa črtice

Obroba elementa s pikami

Obroba elementa z dvojno črto

Lastnina posameznih mejnih odsekov

Stisnjeno žlebasto ogrodje v prostornini

Konveksni valovit okvir v prostornini

Volumetrično stisnjen okvir

Volumetrični konveksni okvir

Lekcije / CSS /

Lekcija 7: Obroba elementa CSS

Skoraj vsako spletno mesto uporablja lastnost, ki ustvari obrobo okoli elementa. Potreben je bodisi za gumbe bodisi za bloke z besedilom. Za ustvarjanje obrobe ima element dve lastnosti v CSS: obrobo in oris. Poglejmo jih.

meja

Ta lastnost je potrebna za nastavitev okvirja okoli elementa; označuje njegovo obrobo v spletnem dokumentu; širina okvirja se upošteva pri pozicioniranju elementa. Ima 3 pomene - barvo, debelino in vrsto okvirja.

Sintaksa za lastnost meje je naslednja:

obroba: Širina Vrsta Barva;
Izberete lahko drugačen vrstni red za določanje vrednosti lastnosti, vendar je glavna stvar skozi presledek.

Debelina (širina) okvirja mora biti določena v slikovnih pikah (px) ali odstotkih (%).
Barvo je mogoče določiti v formatu RGB (Red Green Blue) ali v HTML HEX kodi.

Spodaj so VRSTE ČRT z njihovimi imeni:

Kako nastaviti obrobe za element? To naredimo na naslednji način:

#blokiraj (
border:3px solid #0085ss; /* nastavi črto na 3 slikovne pike debelo in modro */
}

Če želite namestiti enega, dva, tri okvirji na določeni strani, potem ga označimo takole:

meja-vrh- okvir na vrhu;
obroba-spodnja— okvir na dnu;
meja-levo- okvir na levi;
meja-desna- okvir na desni;

Blokiraj (
obroba-desno: 3px polna #0085cc;
obroba-spodnja: 2px črtkana #0085cc;
}

Če želiš odstranite okvirje element v CSS, nato vpišite v lastnost border - none

Prazno (
meja: brez; /* element s praznim razredom ne bo imel obrobe */
}

oris

Oris je lastnost, ki je potrebna za nastavitev zunanje meje elementa.

Jejte dve razliki od meje:
Prvič, črta, navedena v orisu, NE bo vplivala na položaj samega bloka, njegovo širino in višino.
Drugič, ni možnosti namestitve okvirja na določeno stran.
Sintaksa je enaka kot border.

obris: 2px s pikami #0085cc; /* okvir 2 piksli modro pikčast */
Za oris, kot tudi za obrobo, lahko odstranite okvirje tako, da napišete nič:

Hvala za vašo pozornost!

Prejšnji članek
Lekcija 6.

Meje elementov.

Oblazinjenje in robovi v CSS. Kaj sta rob in oblazinjenje? Naslednji članek
Lekcija 8. Kako nastaviti barvo besedila in ozadje elementa v CSS?

Komentarji na članek (vk.com)

meja

Podpora za brskalnik

Opis

Lastnost CSS vam omogoča, da hkrati nastavite širino, slog in barvo obrobe bloka. Obroba bloka je pravilna linija/okvir, ki obdaja blok z vseh strani. Upoštevati je treba, da bo dodajanje okvirja vplivalo na celotno velikost bloka.

Vrednosti so ločene s presledkom in se lahko pojavijo v poljubnem vrstnem redu; brskalnik bo sam določil, katera ustreza želenemu parametru. Vseh treh vrednosti ni treba določiti; širino in/ali barvo lahko izpustite, v tem primeru bo namesto manjkajoče vrednosti uporabljena vrednost, ki je privzeto nastavljena za lastnost, tj. če na primer širina ni določena, bo uporabljena privzeta vrednost lastnosti. Tabela, ki se nahaja pod sintakso, označuje vrednosti, katere lastnosti je mogoče uporabiti.

Opomba: Če želite nastaviti obrobe samo na določenih straneh elementa, uporabite naslednje lastnosti: obroba-zgoraj, obroba-spodaj, obroba-levo, obroba-desno.

Namig: Ob uporabi obrobe boste običajno morali dodati oblazinjenje.

Lastnost CSS: meja

Dodajo prazen prostor med okvir bloka in njegovo vsebino: besedilo, slike ali podrejene oznake. Običajno je obroba narisana blizu vsebine elementa, to je uporabno le, če morate okoli slike nastaviti obrobo.

Sintaksa

obroba: širina obrobe slog obrobe barva|podedovanje;

Vrednosti nepremičnin

Primer

Tukaj je nekaj besedila.

Rezultat tega primera v oknu brskalnika:

Kako nastaviti barvo, slog in velikost obrobe v poljih.

V označevalnih jezikih obroba( meja), imajo samo tabele, slike in okvirje, v nekaterih primerih je mogoče nastaviti barvo obrobe in to je vse.

mejni atribut

Kaskadni slogovni listi nam dajejo več možnosti, a najprej na prvem mestu.

V CSS lahko nadziramo širino obrobe z uporabo border-width, ali natančneje lahko nadzorujemo debelino vsake stranice posebej:
border-top-width- debelina zgornje obrobe
rob-desna-širina— debelina desne obrobe
border-bottom-width- debelina spodnje obrobe
border-left-width— debelina levega robnika
Lahko pa obstaja tudi skrajšana oblika:
P(širina obrobe:zgoraj desno spodaj levo;)(zgoraj desno spodaj levo).
Širina roba se lahko nastavi:
v številkah DIV(border-width:5px), od nič do neskončnosti, tj. pozitivno.
tanek— tanek rob, DIV(border-width:thin)
srednje- srednja obroba, DIV(border-width:medium)
debela- debela obroba, DIV(border-width:thick)
Številke so jasne, vendar je pri teh vrednostih vse odvisno od brskalnika, a vseeno tanek<= medium <= thick .

Barvo obrobe lahko nadzorujemo tudi z uporabo barva obrobe ali natančneje, barva vsake strani:
barva zgornjega roba barva zgornje obrobe;
barva-desne-obrobe barva desne obrobe;
barva-spodnje-obrobe barva spodnje obrobe;
barva-leve-obrobe barva obrobe na levi strani.
Vrednost barve je nastavljena kot za barva, tj. ena od 16 barv: vodna, črna, modra, fuksija, siva, zelena, limeta, kostanjeva, mornarsko modra, olivna, vijolična, rdeča, srebrna, modrozelena, bela ali rumena, lahko nastavite tudi barve: barva: #000000, barva: #AF0 , barva:rgb(255,0,0) oz barva: rgb (100%, 0%, 0%).
Ne glede na to, katero barvno shemo izberete, jo bodo brskalniki še vedno pretvorili barva:rgb(255,0,0). Na primer barva: limeta = barva: #00ff00 = barva:#0F0 = barva: rgb (0%, 100%, 0%), ampak za brskalnik je vse isto barva:rgb(0,255,0), tj. izračunal bo to vrednost.

Če je debelino in barvo obrobe mogoče nadzirati s HTML-jem, potem slog( mejni slog) Samo CSS!!!
Slog je mogoče nadzirati na vsaki strani posebej:
meja-top-style slog zgornje meje;
slog obrobe desno slog desne obrobe;
robni slog slog spodnje meje;
mejno-levi slog slog obrobe leve strani.
Zdaj pa si poglejmo slogovne vrednosti:
1)slog obrobe: brez- To je privzeta vrednost, podobna border-width:0.
2)slog obrobe: skrito- Ista stvar, razen tabel, ki si jih bomo ogledali kasneje.
3)obrobni slog: pikčasto— Obroba s pikami.
4)slog obrobe: črtkano— Obroba iz pikčaste črte.
5)slog obrobe: trdna— Obroba iz polne črte, t.j. kot v HTML.
6)slog obrobe: dvojno— Obroba iz dvojne polne črte, tukaj potrebujete širino obrobe vsaj 3 slikovnih pik.
7)robni slog:utor— Obroba je videti, kot da bi bila izrezana iz platna.
8)border-style:greben— Obroba izgleda, kot da štrli nad platnom.
9)slog obrobe:vložek— Celotna škatla je videti, kot da je vtisnjena v platno.
10)obrobni slog: začetek- Nasprotje od prejšnjega.
Nekateri brskalniki morda prezrejo vrednosti: pikčasto, črtkano, dvojno, utor, greben, vstavek in izhod in jih prikažejo kot polne, tj. navadna meja.

Vse to je seveda res, vendar so vsi zgornji primeri le princip delovanja, ne mehanizma.
Lastnost pravila meja implicira (border: size style color;), to pravilo je izpolnjeno, če so prisotne vse tri vrednosti in samo v tem zaporedju, npr. H1 (obroba: 5px dvojno rdeča;), vendar lahko obstajajo izjeme, če te vrednosti zagotavljajo označevalni jeziki, na primer za tabelo TABLE (obroba: 2 slikovnih pik), tj. Podana je samo ena vrednost.

Da ne bi upravljali celotne meje, ampak vsak del posebej, obstajajo pravila:
(obroba zgoraj: velikost slog barva;) Nadzor zgornjega robnika;
(obroba-desno: barva sloga velikosti;) Kontrola robnika na desni;
(obroba-spodaj: barva sloga velikosti;) Nadzor spodnjega robnika;
(obroba-levo: barva sloga velikosti;) Nadzor levega robnika.
Ta pravila se lahko uporabljajo posamično ali vsa skupaj.

Izjema je to pravilo:
H1(
obroba: 4px polna zelena;
}
Stvar je v tem, da ima v CSS zadnje pravilo najvišjo prednost, v tem primeru lastnost border vsebuje border-left in zato bo pravilo border-left prezrto, pravilno takole:
H1(
obroba: 4px polna zelena;
rob-levo: 2px dvojno rdeče;
}
Najprej določimo pravila za celotno mejo, nato pa še za posamezne odseke.

Za obrobe elementov imam vse, le da si bomo ogledali nekatere lastnosti, ko pridemo do tabel in drugih izjem.

CSS: obroba. Meje elementov.

Obrobe CSS3

Obrobe CSS3

S CSS3 lahko ustvarite zaobljene obrobe, dodate sence vsebnikom in uporabite sliko kot obrobo – brez uporabe oblikovalskega programa, kot je Photoshop.

V tej lekciji se boste naučili o naslednjih lastnostih obrobe:

• mejni polmer
• box-shadow
• mejna slika

Podpora za brskalnik

Internet Explorer 9 podpira nekatere nove lastnosti obrobe.

Firefox zahteva predpono -moz- za border-image.

Chrome in Safari zahtevata predpono -webkit- za border-image.

Opera zahteva predpono -o- za robno sliko.

Safari zahteva tudi predpono -webkit- za box-shadow.

Opera podpira nove lastnosti obrobe.

CSS3 zaobljeni vogali

Dodajanje zaobljenih vogalov v CSS2 je bilo težavno. Za vsak kot smo morali uporabiti drugo sliko.

V CSS3 je ustvarjanje zaobljenih vogalov preprosto.

V CSS3 se lastnost border-radius uporablja za ustvarjanje zaobljenih vogalov:

Ta blok ima zaobljene vogale!

CSS3 Container Shadow

V CSS3 se lastnost box-shadow uporablja za dodajanje sence vsebnikom:

CSS3 Border-Image

Z lastnostjo border-image CSS3 lahko uporabite sliko za ustvarjanje obrobe:

Lastnost border-image vam omogoča, da določite rob slike!

Izvirna slika, uporabljena za ustvarjanje obrobe, je vaša:

Nove lastnosti meje

mejni atribut

mejni atribut, oznaka

Obrobe HTML

Sprejemljivo je uporabljati obrobo brez vrednosti, potem bo debelina obrobe enaka eni slikovni piki. Privzeto je okvir prikazan s 3D-učinki, če pa dodatno uporabite atribut ozadja, bo okvir postal "plosko".

Poleg tega, če ima atribut meje vrednost, ki ni enaka nič, brskalniki prikazujejo tudi tanke obrobe okoli samih celic. Prikaz teh meja je mogoče nadzorovati z uporabo atributa rules.

Vrednote

Vrednost atributa je lahko poljubno nenegativno število, ki določa velikost v slikovnih pikah.

Privzeta vrednost: 0.

Sintaksa

Zahtevani atribut: brez.

Primer HTML: uporaba atributa border

Primer rezultata

Rezultat. Uporaba atributa meje.

Okvirji imajo različne namene, na primer kot okrasni element ali za ločevanje dveh predmetov. CSS ponuja nešteto možnosti za uporabo obrob.

Debelina okvirja

Širina obrobe je določena z lastnostjo border-width, ki ima lahko vrednosti tanek, srednji in debel ali številsko vrednost v slikovnih pikah. Slika prikazuje ta sistem:

Barva okvirja

Lastnost border-color podaja barvo obrobe. Vrednosti so običajne barvne vrednosti, na primer: "#123456", "rgb(123,123,123)" ali "rumena".

Vrste okvirjev

Obstajajo različne vrste okvirjev. Spodaj je prikazanih osem vrst okvirjev in njihova interpretacija v Internet Explorerju 5.5. Vsi primerki so prikazani v "zlati" barvi in ​​"debeli" debelini, seveda pa so lahko prikazani tudi v drugih barvah in debelinah.

Vrednosti brez ali skrito lahko uporabite, če ne želite prikazati obrobe.

Primeri definiranja okvirjev

Zgoraj obravnavane tri lastnosti je mogoče kombinirati v vsakem elementu in temu primerno nastaviti različne okvirje. Za ponazoritev si oglejmo dokument, ki opredeljuje različne okvire za

,

,

in

Rezultat morda ni tako impresiven, vendar kaže nekaj možnosti:

H1 (širina obrobe: debela; slog obrobe: pikčasta; barva obrobe: zlata; ) h2 (širina obrobe: 20 slikovnih pik; slog obrobe: začetek; barva obrobe: rdeča; ) p (širina obrobe: 1 slikovnih pik; slog obrobe: črtkana; barva obrobe: modra; ) ul (širina obrobe: tanka; slog obrobe: polna; barva obrobe: oranžna; )

Prav tako lahko nastavite posebne lastnosti za zgornji, spodnji, desni in levi rob okvirja. Evo, kako se to naredi:

H1 (širina zgornjega roba: debela; slog zgornjega roba: polna; barva zgornjega roba: rdeča; širina spodnjega roba: debel; stil spodnjega roba: poln; barva spodnjega roba: modra; border-right-width: debela; border-right-style: polna; border-right-color: zelena; border-left-width: debela; border-left-style: polna; border-left-color: oranžna; )

Kratek zapis

Tako kot pri mnogih drugih lastnostih lahko z besedno mejo združite več lastnosti v eno. primer:

P (širina obrobe: 1px; slog obrobe: polna; barva obrobe: modra; )

se lahko združi v:

P (obroba: 1px polna modra;)

Povzetek

V tej vadnici ste spoznali neomejene možnosti CSS pri uporabi obrob.

V naslednji lekciji si bomo ogledali, kako določiti dimenzije v modelu škatle - višino in širino.

obroba CSS Element je ena ali več vrstic, ki obkrožajo vsebino elementa in njegovo oblazinjenje. Obroba je podana z uporabo skrajšane lastnosti border. Slog okvirja je nastavljen s tremi lastnostmi: stil, barva in premer.

Uokvirjanje elementov HTML z uporabo lastnosti CSS

1. Obrobni slog

Privzeto so obrobe vedno narisane na vrhu ozadja elementa, pri čemer ozadje sega do zunanjega roba elementa. Slog okvirja določa njegov prikaz; brez te lastnosti okvirji sploh ne bodo vidni. Za element lahko nastavite obrobo za vse strani hkrati z lastnostjo slog obrobe ali za vsako stran posebej z uporabo kvalifikacijskih lastnosti sloga obrobe na vrhu itd. Ni podedovano.

Sintaksa

P (slog obrobe: polno;) p (slog obrobe zgoraj: polno;)

2. Barva okvirja barva obrobe

Lastnost nastavi barvo okvirjev na vseh straneh hkrati. Z uporabo razjasnitvenih lastnosti lahko nastavite drugačno barvo za rob vsake strani elementa. Če za okvir ni določena barva, bo enaka barvi besedila elementa. Če element nima besedila, bo barva obrobe enaka barvi besedila nadrejenega elementa. Ni podedovano.

Sintaksa

P (barva obrobe: #cacd58;)

3. Širina roba

Širina okvirja je določena z uporabo dolžinskih enot ali ključnih besed. Če je lastnost border-style nastavljena na nič in je obroba elementa nastavljena na neko širino, potem je v tem primeru širina obrobe nastavljena na nič. Ni podedovano.

Sintaksa

P (širina obrobe: 2 slikovnih pik;)

4. Nastavitev okvirja z eno lastnostjo

Lastnost obrobe vam omogoča kombiniranje naslednjih lastnosti: širina obrobe, slog obrobe, barva obrobe, na primer:

Div (širina: 100 slikovnih pik; višina: 100 slikovnih pik; obroba: 2 slikovnih pik polno siva; )

V tem primeru bodo navedene lastnosti uporabljene za vse robove elementa hkrati. Če katera koli vrednost ni podana, bo njeno mesto nadomestila privzeta vrednost.

5. Nastavitev okvirja za eno obrobo elementa

V primerih, ko morate za element določiti drugačen slog obrobe, lahko uporabite stenografski zapis za ustrezno obrobo.
Spodaj navedene lastnosti združujejo naslednje lastnosti v eno samo deklaracijo: border-width, border-style in border-color. Seznam lastnosti je določen v danem vrstnem redu, eno ali dve vrednosti pa lahko preskočite, v tem primeru bodo njihove vrednosti prevzele privzete vrednosti.

Slog zgornje obrobe je nastavljen z lastnostjo border-top, spodnje - border-bottom, leve - border-left in desne - border-right.

Sintaksa

P (zgornji rob: 2 slikovnih pik trdno siv;)

Lep pozdrav vsem bralcem trenutne publikacije. Danes vam bom povedal, kako ustvariti dvojno obrobo z orodji CSS. Seznanili se boste z lastnostmi, kot sta obroba in oris, ter njihovim delovanjem.

Po branju tega članka boste razširili svoj arzenal znanja z novimi zanimivimi triki za ustvarjanje senc okoli robov in obvladali tehnologijo ustvarjanja okvirjev, sestavljenih iz različnih barv. Poleg tega se želim dotakniti teme psevdoelementov, ki bistveno razširijo zmožnosti postavitve v spletnih jezikih in CSS. No, pa se lotimo posla!

Meja in njene zmožnosti

Začel bom z znano mejno lastnino. Pogosto se uporablja v programski kodi in v prejšnjih objavah sem se ga večkrat posredno dotaknil. Ta lastnost je univerzalna in zelo prilagodljiva.

Poleg standardnega namena se obroba uporablja za podčrtavanje naslovov ali poudarjanje pomembnih besedilnih informacij med vso vsebino, kot je ločevanje slovničnih pravil z navpično črto.

Seveda se vsak razvijalec po lastni presoji »igra« z obstoječimi elementi spletnih jezikov, zato je primerov uporabe lahko veliko.

Obroba omogoča določitev sloga, debeline in barve obrob za vse strani hkrati in za določeno območje. To naredite tako, da besedni meji dodate ime strani z vezajem. Na primer obroba-spodnja.

Slog obrobe je lahko popolnoma drugačen:

• črtkano
• pikčasto
• trdna
• dvojno
• volumetrične (utor, izhod, greben, vstavek) črte

Oris in njegove zmožnosti

Kar zadeva oris, je njegov namen enak prejšnji lastnosti, vendar se uporablja za določitev zunanje meje elementa. Torej, če nastavite vrednosti za dva opisana elementa stilskih tabel hkrati, bo obroba uokvirila predmet v okvir, obris pa bo nameščen okoli obrobe.

Pa vendar obstajajo še druge razlike. Tako oris ne vpliva na lokacijo predmeta med drugo vsebino in ne spremeni njegove debeline, česar ne moremo reči za prejšnjo lastnost.

Poleg tega ta element CSS nima veliko prilagodljivosti. Vrednosti, ki jih določi oblikovalec postavitve, veljajo za vse strani zunanjega okvirja in ne bo mogoče delati samo z eno stranjo.

Tako kot obroba vam trenutna lastnost omogoča nastavitev različnih slogov obrob. Poleg tega so njihova imena enaka kot v prejšnjem elementu css.

Kaj so psevdoelementi in za kaj so lahko uporabni?

V tem poglavju vam želim povedati novo gradivo. V nekaterih projektih je brez poznavanja te teme preprosto nemogoče.

Torej so psevdoelementi potrebni za oblikovanje tistega področja elementov, za katere v drevesu dokumenta ni izbirnikov ali definicij.

Ne zamenjujte s psevdo-razredi. Ti pa oblikujejo obstoječe izbirnike in elemente.

Sodobna pravila za definiranje psevdoelementov uporabljajo dvojno dvopičje (:after). Če pa preprosto uporabite »:«, bo validator preskočil kodo in ne bo izdal napake.

Danes obstaja veliko psevdoelementov. V spodnji tabeli sem naštel priljubljene.

Rad bi opozoril na določeno posebnost uporabe prvih dveh psevdoelementov: vedno sodelujeta skupaj z lastnostjo, v kateri je napisano samo besedilo - vsebino.

Praktični del

Zgoraj sem vam povedal osnovno teoretično gradivo in če ga v celoti preberete, potem s primerom ne boste imeli težav.

Spodaj sem priložil kodo programa v katerega sem kot obljubljeno implementiral objekte z dvobarvnim okvirjem. Nekaterim sem dodala tudi sence.

Naj vas spomnim, da je to mogoče izvesti z uporabo lastnosti, kot je npr box-shadow. Zanj lahko določite do pet vrednosti, ki bodo odgovorne za vodoravni premik, navpični premik, polmer zamegljenosti, raztezanje sence in njeno barvo.

Upam, da vam je bila ta publikacija koristna. Zelo bom vesel, če vas vidim med svojimi naročniki. Delite povezavo do mojega bloga s prijatelji. Vso srečo!

S spoštovanjem, Roman

Opis

Splošna lastnost obrobe vam omogoča, da hkrati nastavite debelino, slog in barvo obrobe okoli elementa. Vrednosti so lahko v poljubnem vrstnem redu, ločene s presledkom; brskalnik bo sam določil, katera od njih ustreza želeni lastnosti. Če želite nastaviti obrobo samo na določenih straneh elementa, uporabite lastnosti border-top , border-bottom , border-left , border-right.

Sintaksa

Vrednote

Vrednost širine roba določa debelino roba. Za nadzor videza je na voljo več vrednosti sloga obrobe. Njihova imena in rezultat akcije so predstavljeni na sl. 1.

Slika 1. Slogi okvirjev

border-color nastavi barvo obrobe, vrednost je lahko v kateri koli obliki, ki jo dovoljuje CSS.

inherit podeduje vrednost nadrejenega.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ta primer doda dvojno obrobo okoli plasti. Rezultat je prikazan na sl. 2.

riž. 2. Uporaba lastnosti meje

Objektni model

document.getElementById("elementID ").style.border

Brskalniki

Brskalnik Internet Explorer do vključno različice 6 prikazuje pikčasto črtkano z debelino obrobe 1 slikovne pike. Pri debelini 2 slikovnih pik in več pikčasta vrednost deluje pravilno. Ta napaka je odpravljena v IE7, vendar samo za vse obrobe 1px. Če ima ena od obrob bloka debelino 2 slikovnih pik ali več, se v IE7 vrednost s pikami spremeni v črtkano.

Različice Internet Explorerja do vključno 7.0 ne podpirajo podedovane vrednosti.

Slog obrobe se lahko nekoliko razlikuje med brskalniki, če uporabljate vrednosti groove, ridge, inset ali outset.