Michael 2016-06-11 1 HTML i CSS 0

Kako se radi dvostruki obrub u css-u?

Pozdrav svima. Znate li kako napraviti dupli obrub u css-u? Ako ne, pročitajte ovu malu bilješku. Poanta je da to ne možete učiniti s uobičajenom granicom, ovdje morate ići drugim putem.

Ako navedete obrub pomoću svojstva granice, možete odrediti samo jedan. Ali vrlo često dizajn može zahtijevati više okvira. U ovom slučaju, trebali biste koristiti pseudo-okvir - sjenu.

Dvostruki obrub s kutijom-sjenom

Općenito, ako želite saznati više o sjeni u css-u, savjetujem vam da pročitate relevantnu temu. U ovom članku neću detaljno objašnjavati sintaksu svojstva, već ću vam jednostavno pokazati trik kako stvoriti dvostruki obrub. Dakle, napravimo običan blok kojem ću dodijeliti neke stilove. Blok može biti bilo koji i s bilo kojim sadržajem. U mom slučaju, to je jednostavan div, pa neću ni pokazati html kod. A evo i stilova:

Div (
pozadina: # E0D8A3;
širina: 180px;
visina: 110px;
padding: 12px;
}

Pa, tipičan primjer blok dizajna.
Sada napravimo dvostruki obrub koristeći više sjenki. Dodat ću sljedeće svojstvo stilovima za blok:

Box-shadow: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

Ovako to izgleda:

Kao što vidite, ispalo je sasvim lijepo. Postoji samo 5 parametara u box-shadow. Prvi je horizontalni pomak sjene, drugi je vertikalni. Treći i četvrti parametar su zamućenje i rastezanje. Kao što vidite, prva tri uopće ne diramo. Ne trebamo zamućenje jer želimo oštru sjenu. Kao što vidite, propisao sam četvrti parametar - istezanje. Određuje koliko će sjena biti veća od elementa na koji je pričvršćena.

Prema zadanim postavkama, sve izgleda ovako - sjena je iste veličine kao i element i jasno leži ispod nje. Ako promijenite rastezanje, tada sjena počinje stršiti izvan elementa. Ovako možete kreirati granice, potpuno isto kao i sa svojstvom granice. Pa, s petim parametrom, mislim da je sve jasno - ovo je boja sjene.

Kao što vidite, upravo sam naveo parametre za svaku novu sjenu, odvojene zarezima. Mislim da ste već pogodili da na isti način možete stvoriti trostruki obrub itd. Ovdje nema ograničenja. Zapravo, što se mene tiče, pitanje je zatvoreno, ali ako imate pitanja, možete ih napisati u komentarima.

Samo trenutak vaše pažnje: Svi želimo ugostiti naše stranice na pouzdanom hostingu. Analizirao sam stotine hostinga i pronašao najbolji - HostIQ Na internetu postoje stotine pozitivnih recenzija o njemu, prosječna ocjena korisnika je 4,8 od 5. Neka vaše stranice budu sretne.

Vlad Merzhevich

Uz CSS, možete dodati obrub elementu na nekoliko načina. U osnovi, naravno, svojstvo granice koristi se kao najuniverzalnije, kao i obris i, iznenađujuće, kutijasta sjena, čiji je glavni zadatak stvaranje sjene. Zatim ćemo razmotriti ove metode i njihove razlike među sobom.

Svojstvo obrisa

Najjednostavnije svojstvo za stvaranje okvira. Ima iste parametre kao i granica, ali se značajno razlikuje od nje u nekim detaljima:

• oko elementa se crta obris (obrub je iznutra);
• obris ne utječe na dimenzije elementa (obrub se dodaje širini i visini elementa);
• obris se može postaviti samo oko cijelog elementa, a ne na pojedinačnim stranama (obrub se može koristiti na bilo kojoj strani ili sve odjednom);
• na obris ne utječe radijus zaokruživanja koji je postavljen svojstvom border-radius (na obrub utječe).

Postavlja se pitanje - u kojim slučajevima je potreban obris, kada njegovu ulogu, unatoč navedenim razlikama, u potpunosti preuzima granica? Nema mnogo situacija, ali se događaju:

• stvaranje složenih raznobojnih okvira;
• dodavanje obruba elementu kada zadržite pokazivač miša iznad njega;
• skrivanje okvira koji automatski dodaje preglednik za neke elemente kada dobiju fokus;
• za obris, možete postaviti udaljenost od ruba elementa do okvira pomoću svojstva outline-offset za stvaranje.

Raznobojni okviri

Treba razumjeti da obris ni na koji način ne zamjenjuje obrub i može postojati s njim, kao što je prikazano u primjeru 1.

Primjer 1. Izrada okvira

U ovom primjeru, oko elementa je dodan crni obrub, koji je od pozadine odvojen bijelim obrubom (slika 1).

Riža. 1. Okvir oko elementa

Okvir pri korištenju: lebdjeti

Dodavanje obruba kroz obrub povećava širinu elementa, što je prilično uočljivo pri kombiniranju obruba i: hover pseudo-klase. Postoje dva načina kako ovo "pobijediti". Najjednostavnije je zamijeniti obrub obrisom, za koji znamo da nema utjecaja na dimenzije elementa (primjer 2).

Primjer 2. Granica pri lebdenju

obris nije uvijek prikladan, makar samo zato što zaokruživanje kutova ne utječe na njega. Ovdje je prikladna druga metoda - dodajte nevidljivi okvir ili okvir koji odgovara boji pozadine, a zatim promijenite njegove parametre pri lebdenju (primjer 3). Tada neće doći do pomaka elementa, budući da okvir već postoji od početka. Ali uvijek zapamtite da je širina elementa zbroj vrijednosti širine, obruba s lijeve strane i obruba s desne strane. Slična je situacija i s visinom.

Primjer 3. Okvir pri lebdenju

Obrub oko polja obrasca

U nekim preglednicima (Chrome, Safari, najnovije verzije Opera), mali obrub u boji pojavljuje se oko polja obrasca kada dobiju fokus (slika 2). Da biste ga uklonili, samo dodajte vrijednost none svojstvu obrisa u stilovima, kao što je prikazano u primjeru 4.

Riža. 2. Okvir oko polja

Primjer 4. Uklanjanje okvira

Okviri preko box-shadow

Iako je svojstvo box-shadow namijenjeno dodavanju sjene oko elementa, može se koristiti i za stvaranje obruba koje se ne mogu napraviti s obrubom ili obrisom. To je zbog činjenice da broj sjena može biti neograničen, čiji su parametri navedeni odvojeni zarezima.

Da biste dobili okvir, prva tri parametra treba postaviti na nulu, oni su odgovorni za položaj sjene i njegovu zamućenost. Četvrti parametar u ovom slučaju odgovoran je za debljinu obruba, a peti postavlja boju obruba. Za drugi okvir, četvrti parametar je zbroj debljina dvaju okvira.

Primjer 4 pokazuje kako dodati dva obruba i jedan obrub desno koristeći jedno svojstvo sjene okvira.

Primjer 4. Korištenje box-shadow

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Okviri stvoreni svojstvom box-shadow

Opis

Generičko svojstvo obruba omogućuje vam da istovremeno postavite debljinu, stil i boju obruba oko elementa. Vrijednosti mogu ići bilo kojim redoslijedom, odvojene razmakom, preglednik će odrediti koja od njih odgovara željenom svojstvu. Da biste postavili obrub samo na određenim stranama elementa, koristite svojstva border-top, border-bottom, border-left, border-right.

Sintaksa

Vrijednosti

Vrijednost granice širine određuje debljinu obruba. Osigurano je nekoliko vrijednosti u stilu obruba za kontrolu njegovog izgleda. Njihova imena i rezultat akcije prikazani su na sl. 1.

Sl. 1. Stilovi okvira

border-color postavlja boju obruba, vrijednost može biti u bilo kojem važećem CSS formatu.

naslijediti nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ovaj primjer dodaje dvostruki obrub oko sloja. Rezultat je prikazan na sl. 2.

Riža. 2. Primjena svojstva granice

Model objekta

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

Preglednici

Internet Explorer do i uključujući verziju 6 prikazuje isprekidane iscrtke s debljinom obruba od 1px. S debljinom od 2px ili više, točkasta vrijednost radi ispravno. Ovaj je bug ispravljen u IE7, ali samo za sve granice od 1px. Ako je jedan od obruba okvira deblji od 2px ili više, tada u IE7 točkasta vrijednost postaje isprekidana.

Internet Explorer do i uključujući verziju 7.0 ne podržava naslijeđenu vrijednost.

Stil obruba može se neznatno razlikovati između preglednika kada se koriste vrijednosti utora, grebena, umetka ili ishodišta.

Opis

Postavlja stil obruba oko elementa. Dopušteno je postaviti pojedinačne stilove za različite strane elementa.

Sintaksa

obrubni stil: (1,4) | naslijediti

Vrijednosti

Osigurano je nekoliko vrijednosti svojstava u stilu obruba za kontrolu izgleda obruba. Izgled ovisi o korištenom pregledniku i navedenoj debljini obruba. Stol 1 prikazuje nazive stilova i rezultirajući okvir na različitim vrijednostima debljine - 1, 3, 5 i 7 piksela.

Osim vrijednosti navedenih u tablici, koriste se sljedeće ključne riječi.

Ništa Ne prikazuje obrub i njegova širina (širina obruba) je postavljena na nulu. hidden Ima isti učinak kao nijedan osim za primjenu stila obruba na ćelije tablice koje imaju svojstvo border-collapse postavljeno na kolaps. U tom slučaju granica oko ćelije uopće neće biti prikazana. inherit Nasljeđuje vrijednost od roditelja.

Dopušteno je koristiti jednu, dvije, tri ili četiri vrijednosti, odvajajući ih razmakom. Učinak ovisi o količini i naveden je u tablici. 2.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Rezultat ovog primjera prikazan je na sl. 1.

Riža. 1. Primjena svojstva border-style

Model objekta

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

Preglednici

Internet Explorer do i uključujući verziju 6 prikazuje isprekidane iscrtke s debljinom obruba od 1px. S debljinom od 2px ili više, točkasta vrijednost radi ispravno. Ovaj je bug ispravljen u IE7, ali samo za sve granice od 1px. Ako je jedan od obruba okvira deblji od 2px ili više, tada u IE7 točkasta vrijednost postaje isprekidana.

Internet Explorer do i uključujući verziju 7.0 ne podržava skrivene i naslijeđene vrijednosti.

Stil obruba može se neznatno razlikovati između preglednika kada se koriste vrijednosti utora, grebena, umetka ili ishodišta.

Proučili smo svojstvo za ukrašavanje teksta i fonta, sada je vrijeme da prijeđemo na druge elemente. U ovom vodiču ćemo pogledati stvaranje okvira pomoću CSS... Ovo svojstvo se koristi prilično često, pa mu treba posvetiti malo više pažnje.

I tako, pretpostavimo da je potrebno napraviti granicu oko nekog elementa. Na primjer, stvoriti zaglavlje i napravi okvir oko njega.

Parametri koji karakteriziraju okvir: 1) Debljina okvira, 2) Stil okvira i 3) Boja okvira. I krenimo redom:

• 1. Debljina okvira: širina obruba: 2px;
• 2. Stil okvira: obrubni stil: čvrsta;
• 3. Boja okvira: boja obruba: # ff0000;

Koji su stilovi okvira u CSS? Ispod su svi dostupni stilovi obruba:

• točkasta - To je točkasti okvir.
• isprekidana - Ovo je točkasti okvir
• čvrsta - Ovo je čvrst okvir
• dvostruko - Ovo je dvostruki okvir
• utor - Volumetrijski prikaz
• greben - Volumetrijski prikaz
• umetnuti - Volumetrijski prikaz
• na početku - Volumetrijski prikaz

Sada imamo sve da stvorimo obrub oko naslova.

HTML

Stvara obrub oko naslova.

I sam stil za okvir.

H2 (širina obruba: 2px; stil obruba: čvrsta; boja obruba: # FF0000;)

Kao rezultat toga, čvrsta crvena granica debljine od 2px.

Okvir je formiran sa četiri strane: Gornji, Pravo, Niži i Lijevo i, budući da smo specificirali svojstvo granica , tada preglednik prema zadanim postavkama crta sve četiri strane okvira. Dakle, ako trebate postaviti okvir samo s jedne strane, tada se koriste prefiksi koji označavaju stranu na kojoj treba stvoriti okvir.

• vrh - Vrh.
• pravo - Dobro
• dno - Donji dio
• lijevo - Lijevo

Dakle, ako želimo okvir napraviti samo na dnu odlomka, odnosno podvući ga, onda svakom svojstvu granica dodati prefiks dno ... To će rezultirati sljedećom strukturom koda.

H2 (border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: # FF0000;)

Korištenje ovih stilova za preglednik značilo bi da samo trebate napraviti obrub od dna, tj. podvuci naslov. Na isti način možete duplicirati ovaj kod postavljanjem okvira s druge strane, na primjer, gornjeg.

H2 (širina-obrub-dno: 2px; obrub-dno-stil: dvostruko; boja-obruba: # FF0000; širina-vrh-obruba: 2px; obrub-vrh-stil: dvostruko; boja-vrh-obruba: # FF0000;)

Naslov će sada imati crveni obrub oko vrha i dna. Isto se može učiniti i za druge stranke.

Kao što ste vjerojatno već primijetili, zapis se pokazao prilično velikim, stoga postoji skraćena vrsta zapisa, koja se često koristi u praksi.

Gornja slika prikazuje strukturu skraćene notacije, gdje je svojstvo naznačeno granica a kao vrijednosti, odvojene razmakom, naznačena je širina okvira - granica-širina , stil okvira je u stilu granice i boja obruba - # ff0000 .

Odnosno, kada preglednik vidi takvu skraćenu oznaku granica: 2px čvrsta # ff0000; , također će stvoriti obrub na sve četiri strane naslova. Ova kratka oznaka je ekvivalentna onoj koju smo koristili gore (gdje su primijenjena tri svojstva).

Ako, koristeći kratku notaciju, trebate odrediti okvir samo s jedne strane, tada svojstvu dodajte jednostavnost koja označava stranu s kojom ćete stvoriti okvir.

H2 (bord-top: 2px solid # ff0000;)

Dakle, uz pomoć kratke bilješke izrađuje se okvir s vrha, gdje je također naznačena debljina, stil i boja okvira.

Na taj način, koristeći svojstvo granica oko bilo kojeg elementa izrađuje se okvir. Također, uz pomoć okvira, stvaraju se podcrtane veze kada je potrebna drugačija boja podcrta. Pa, to je sve s okvirima, prelazimo na sljedeću važnu lekciju, gdje ćemo razmotriti