Michael 2016-06-11 1 HTML i CSS 0

Kako napraviti dvostruki obrub u CSS-u?

Bok svima. Znate li kako napraviti dvostruki obrub u CSS-u? Ako niste, pročitajte ovu kratku bilješku. Činjenica je da se to ne može učiniti pomoću obične granice, ovdje morate ići drugim putem.

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

Dvostruki obrub pomoću sjene okvira

Općenito, ako želite detaljnije proučiti sjene u CSS-u, savjetujem vam da pročitate relevantnu temu. U ovom članku neću detaljno objašnjavati sintaksu svojstva, već ću jednostavno pokazati tehniku ​​kako stvoriti dvostruki obrub. Dakle, stvorit ću običan blok i dodati mu neke stilove. Blok može biti bilo koji i sa bilo kojim sadržajem. U mom slučaju to je jednostavan div, dakle html kod Neću ni pokazati. A evo i stilova:

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

Pa, tipičan primjer blok dizajna.
Kreirajmo sada dvostruki okvir koristeći više sjena. Dodat ću sljedeće svojstvo stilovima bloka:

Sjena okvira: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Ovako to izgleda:

Kao što vidite, ispalo je prilično lijepo. Box-shadow ima samo 5 parametara. Prvi je horizontalni pomak sjene, drugi je vertikalni pomak. Treći i četvrti parametar su zamućenje i rastezanje. Kao što vidite, prva tri uopće ne diramo. Ne treba nam 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 element i leži jasno ispod njega. Ako promijenite istezanje, sjena počinje stršati izvan elementa. Ovako možete stvoriti granice, potpuno isto kao sa svojstvom border. Pa, s petim parametrom, mislim da je sve jasno - ovo je boja sjene.

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

Trenutak vaše pažnje: Svi želimo naše web stranice smjestiti na pouzdan hosting. Analizirao sam stotine hostinga i pronašao najbolje - HostIQ Ima ih na stotine online Pozitivna ocjena o tome, prosječna korisnička ocjena je 4,8 od 5. Neka vaše stranice budu dobre.

Rubovi su one linije koje okružuju element (sadržaj koji sadrži i ispunu oko njega). Primjer s kojim smo se već susreli jesu okviri ćelija unutar tablice.

CSS nudi dvije vrste obruba: unutarnje obrube i vanjske linije. CSS svojstva, odgovoran za dizajn okvira, počinju riječju "border", što se može prevesti kao "Okvir", "Granica". Prisutnost i format vanjskog obrisa određeni su svojstvima koja počinju riječju "obris". Obris, za razliku od ruba, ne utječe na širinu i položaj uokvirenog bloka. Osim toga, ne može se instalirati samo s jedne strane, kao granica- samo sa svih strana odjednom.

Prvo, razgovarajmo o dizajnu granica, a zatim ćemo prijeći na obris.

border-width

Postavlja širinu obruba. Jasno je da je prema zadanim postavkama element okružen okvirima s četiri strane. Svojstvo vam omogućuje da postavite širinu obruba ili istu za sve strane ili različitu za svaku stranu. Ovisno o tome koju širinu treba dodijeliti kojim granicama, u pravilu možete odrediti od jedne do četiri vrijednosti.

Možete postaviti širinu koristeći uobičajene piksele, postotke i druge CSS jedinice duljine, ili rezervirane riječi tanak(2px), srednji(4px) i debeo(6 piksela).

Širina obruba: 16px 12px 4px 8px;

rubni stil

Definira stil obruba. Imajte na umu da ako ne postavite ovo pravilo, ali navedete svojstvo border-width, tada uopće neće biti okvira, pa ako želite vidljive granice, svakako navedite rubni stil.

Svojstvo može imati dosta vrijednosti, a sve su jasno prikazane na slici ispod.

Zadnji odlomak pokazuje da stil, kao i debljina, okvira sa svake strane može biti vlastiti:

rubni stil: puna dvostruka točkasta nema

boja ruba

Djeluje isto kao i prethodna svojstva, ali je odgovoran za boju obruba. Također možete postaviti od jedne do četiri vrijednosti, a rezultat već znate. Ako pravilo nije postavljeno, okviri će imati boju teksta trenutnog elementa ili, ako to nije navedeno, boju teksta nadređenog elementa.

Boja obruba: #C85EFA;

granica

Olakšava pisanje i spremanje koda dopuštajući vam da postavite sva navedena svojstva za granice na svim stranama elementa u jednom retku:

P (obrub: 2px puno zeleno;)

Za postavljanje različitih pravila za okvire na različitim stranama, možete koristiti sljedeće vrijednosti:

• granica-vrh- Gornja granica.
• granica-desno- točno.
• granica-dno- niži.
• granica-lijevo- lijevo.

P ( rub-lijevo: 6px točkasto žuto; )

širina obrisa

Isto kao border-width, samo za vanjski okvir, ne i za unutarnji okvir. Postavlja debljinu obrisa na iste vrijednosti kao border-width. Osim debljine okvira elementa, morate odrediti njegov stil, inače neće biti obrisa.

outline-style

Vrijednosti svojstva dupliciraju vrijednosti rubni stil. Pravilo određuje stil vanjske konture.

Opis

Svojstvo generičke granice omogućuje vam da istovremeno postavite debljinu, stil i boju granice oko elementa. Vrijednosti mogu biti bilo kojim redoslijedom, odvojene razmakom; preglednik će sam 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-desno.

Sintaksa

Vrijednosti

Vrijednost rubne širine određuje debljinu ruba. Daje se nekoliko vrijednosti stila 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 formatu koji dopušta CSS.

inherit nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

U u ovom primjeru Oko sloja se dodaje dvostruki rub. Rezultat je prikazan na sl. 2.

Riža. 2. Primjena svojstva granice

Objektni model

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

Preglednici

preglednik Internet Explorer do uključivo šeste verzije, s debljinom obruba od 1 px, prikazuje se točkasto kao isprekidano. S debljinom od 2 px i većom, točkasta vrijednost radi ispravno. Ova greška je ispravljena u IE7, ali samo za sve obrube od 1px. Ako jedan od rubova bloka ima debljinu od 2px ili veću, tada se u IE7 točkasta vrijednost pretvara u isprekidanu.

Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Stil obruba u različitim preglednicima mogu neznatno varirati kada se koriste vrijednosti utora, grebena, umetka ili ispada.

Okviri imaju različite namjene, primjerice kao ukrasni element ili za odvajanje dva predmeta. CSS pruža bezbroj mogućnosti za korištenje obruba.

Debljina okvira

Širina obruba određena je svojstvom border-width, koje može imati vrijednosti tanak, srednji i debeli ili numeričku vrijednost u pikselima. Slika prikazuje ovaj sustav:

Boja okvira

Svojstvo border-color određuje boju obruba. Vrijednosti su normalne vrijednosti boja, na primjer: "#123456", "rgb(123,123,123)" ili "yellow" .

Vrste okvira

postojati Različite vrste okvir Osam vrsta okvira i njihova interpretacija u Internet Exploreru 5.5 prikazani su u nastavku. Svi primjerci prikazani su u "zlatnoj" boji i "debeloj" debljini, ali se naravno mogu prikazati iu drugim bojama i debljinama.

Vrijednosti none ili hidden mogu se koristiti ako ne želite prikazati obrub.

Primjeri definiranja okvira

Tri gore spomenuta svojstva mogu se kombinirati u svakom elementu i, sukladno tome, mogu se postaviti različiti okviri. Za ilustraciju, pogledajmo dokument koji definira različite okvire za

,

,

I

Rezultat možda nije toliko impresivan, ali pokazuje neke mogućnosti:

H1 (širina obruba: debelo; stil obruba: točkasto; boja obruba: zlatna; ) h2 (širina obruba: 20px; stil obruba: početak; boja obruba: crvena; ) p (širina obruba: 1px; border-style: isprekidano; border-color: blue; ) ul ( border-width: thin; border-style: solid; border-color: narančasta; )

Također možete postaviti posebna svojstva za gornji, donji, desni i lijevi rub okvira. Evo kako se to radi:

H1 (širina gornjeg obruba: debela; stil gornjeg obruba: čvrsta; boja gornjeg obruba: crvena; širina donjeg obruba: debeo; stil donjeg obruba: čvrsta; boja donjeg obruba: plava; border-right-width: debelo; border-right-style: jednobojno; border-right-color: zelena; border-left-width: debelo; border-left-style: jednobojno; border-left-color: narančasto; )

Kratka notacija

Kao i kod mnogih drugih svojstava, možete kombinirati više svojstava u jedno pomoću granice riječi. Primjer:

P ( border-width: 1px; border-style: solid; border-color: blue; )

mogu se kombinirati u:

P (obrub: 1px puno plavo;)

Sažetak

U ovom vodiču naučili ste o neograničenim mogućnostima CSS-a pri korištenju obruba.

U sljedećoj lekciji ćemo pogledati kako definirati dimenzije u modelu kutije - visinu i širinu.

Border-image je svojstvo koje vam omogućuje postavljanje pozadinska slika za okvir elementa. Svojstvo ispunjava okvir zadanom slikom, raspoređujući dijelove slike tako da su kutni dijelovi u kutovima okvira, a razmaci između njih su ispunjeni ostatkom slike.

Ovo svojstvo olakšava izvođenje nevjerojatnih stvari koje su prije zahtijevale 3 do 8 slika i manipulaciju oznakama.

Ažurirano: Firefox radi od verzije 29.

Veličina slike jednaka je debljini okvira. Boja i stil okvira se zanemaruju.

Ako navedete samo border-image-source , slika će ispuniti kutove, ne znajući što učiniti sljedeće:

Rub: 80 px čvrsti proziran; granica-slika: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Isječak slike ruba

Važno svojstvo koje određuje veličinu dijela slike koji će ispuniti kutove okvira. Preostali dijelovi će se koristiti za popunjavanje prostora između uglova prema algoritmu navedenom u border-image-repeat.

Moguće vrijednosti:

<проценты>- izračunato u odnosu na veličinu slike. Horizontalno u odnosu na širinu, okomito - u odnosu na visinu.<числа>- piksela (za bitmapa) ili koordinate (za vektor). Mjerne jedinice nisu naznačene. napuniti - ključna riječ, nadopunjujući prethodne vrijednosti. Ako je navedeno, slika nije odrezana unutarnjim rubom okvira, već također ispunjava područje unutar okvira. Vrlo korisno za zaobljene okvire.

Da biste definirali vrijednosti za svaku stranu, možete navesti više vrijednosti odvojenih razmakom.

Zbroj vrijednosti suprotnih strana mora biti manji od veličine slike, inače neće biti ničega što bi ispunilo prostor između uglova.

Rub: 80 px čvrsti proziran; granica-slika: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); rub-slike-slice: 100;

Granica-slika-ponovi

Svojstvo određuje kako će praznine između uglova biti ispunjene.

Moguće vrijednosti: rastezanje - rasteže područje popunjavanja slike. Zadana vrijednost; ponoviti - ponavlja dio ispune, dok su spojevi s kutnom slikom vidljivi; okrugli - ispunjava prazninu između uglova. Na sredini bočne strane može biti vidljiv šav. Najpažljivija akcija. razmak - djeluje slično ponavljanju . Nisam našao nikakvu razliku.

Možete postaviti dvije vrijednosti odjednom, prva će biti odgovorna za ponašanje slike u gornjem i donjem okviru, druga - za lijevo i desno.

Slika ruba: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); rub-slike-slice: 100; border-image-repeat: ponoviti;

Lijevo je ponavljanje, desno je okruglo.

Ako je okvir složen i stranice ne pristaju dobro jedna uz drugu, rastezljivost će djelovati ispravnije, evo primjera.

Border-image-width

rub-slike-width

Svojstvo kontrolira širinu vidljivog dijela okvira i skalira ga. Ako je ova vrijednost veća od border-width, rubna slika će puzati ispod sadržaja, čak i ako svojstvo ispune nije postavljeno.

Moguće vrijednosti:<длина>- vrijednosti u px ili em;<%>- postotne vrijednosti u odnosu na veličinu slike;<числа>- numerička vrijednost s kojom se množi border-width auto - ključna riječ. Ako je dana, vrijednost je jednaka odgovarajućem rub-image-slice. Ako nema odgovarajuće veličine, koristi se vrijednost širine obruba, a slika ispunjava cijeli kut okvira, puzeći ispod sadržaja. Djeluje malo čudno.

Obrub: 60 px čvrsti proziran; granica-slika: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); rub-slike-slice: 80; border-image-repeat: round; rub-slike-width: 160px;

Desno je okvir s rubnom širinom slike. Primjer s lijeve strane pokazuje kako je slika izrezana unutarnjim rubovima okvira. Zbog povećane širine, desni okvir se uvukao ispod sadržaja.

Granica-slika-ishod

Zanimljivo svojstvo koje vam omogućuje pomicanje okvira izvan elementa. Negativne vrijednosti nisu podržane.

Moguće vrijednosti:<длина>- vrijednosti u px ili em;<числа>- numerička vrijednost kojom se širina obruba množi.

Obrub: 60 px čvrsti proziran; granica-slika: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); granica-slike-slice: 120; border-image-repeat: round; rub-slike-outset: 60px 10px 50px 120px;

Desno je primjer s border-image-outset. Ovo svojstvo ne utječe na veličinu elementa, a okvir može preklapati susjedne elemente.