Opcije granice. Stvaranje obruba u CSS-u. granica posjeda. CSS sintaksa širine obruba

Vlad Merzhevich

Efekt trodimenzionalnog stola postiže se istovremenom upotrebom svijetlih i tamnih boja u okviru ili ćelijama, čime se stvara iluzija da stol strši iznad pozadine web stranice. Na primjer, okvir oko stola se prema zadanim postavkama prikazuje kao 3D. Iako ova vrsta okvira nije baš popularna među web dizajnerima, to ne znači da takve okvire uopće ne treba koristiti. Koristeći stilove, stolu se može dati širok izbor izgleda, uključujući i trodimenzionalne, koji se mogu uspješno izdvojiti od svojih "ravnih" kolega.

Debljina 3D okvira kontrolira se atributom border tag

Da bismo stvorili navedenu tablicu, izvadit ćemo sve mogući parametri u stilovima, a dodavanje okvira bit će dodijeljeno atributu obruba (primjer 1).

Primjer 1: Korištenje atributa border

U ovom primjeru obrub oko stola je debeo dva piksela, a njegov izgled može neznatno varirati ovisno o veličini stola. različitim preglednicima.

Stilovi vam također omogućuju stvaranje trodimenzionalnog efekta stola pomoću svojstva rubnog univerzalnog stila. Vrijednosti označavaju stil linija i njihovu debljinu, što uvelike utječe na konačni izgled stola. U tablici 1 prikazuje neke vrijednosti i konačni rezultat.

Primjer 2 koristi stil s vrijednošću utora i debljinom od 5 piksela za dodavanje obruba. Dobivena tablica prikazana je na sl. 2.

Svojstvo stila obruba primjenjuje se na selektor TABLE za stvaranje obruba oko tablice i na selektore TD i TH za dodavanje obruba svakoj ćeliji. Kako bi se izbjegle dvostruke linije gdje se različite ćelije dodiruju, svojstvo border-collapse koristi se s vrijednošću kolapsa (primjer 2).

Primjer 2: Napravite okvir pomoću stilova

Ovaj primjer stvara udubljeni sivi rub oko ćelija i tablice u cjelini.

Mi sami možemo stvoriti učinak trodimenzionalnog stola pravilnim izmjenjivanjem tamnih i svijetlih linija u njegovim redovima (slika 3).

Ova ilustracija pokazuje da parni redovi tablice imaju svijetlu pozadinu, bijelu vodoravnu crtu na dnu i tamno sivu crtu na vrhu. Međutim, možete to protumačiti obrnuto i reći da neparne linije imaju bijelu crtu na vrhu i tamnu crtu na dnu.

Da biste stvorili onaj prikazan na Sl. 3 tablice, uvedimo dodatnu klasu pod nazivom even i dodajmo je u parne retke tablice. U isto vrijeme, ne možete izravno postaviti svojstvo granice za TR selektor; u ovom slučaju linija jednostavno neće biti prikazana. Stoga ćemo koristiti selektore konteksta i dodati konstrukciju .even TD, koja kaže da za sve ćelije koje se nalaze unutar elementa s parnom klasom postavljamo liniju ispod i iznad. Boja pozadine može se primijeniti na TR selektor pomoću svojstva pozadine, kao što je prikazano u primjeru 3.

Primjer 3: Odabir redaka tablice

Ako je donji red tablice ravnomjeran, čija je pozadina postavljena u svijetloj boji u stilu, tada na dnu tablice možete vidjeti svijetlu prugu. Možete živjeti s njegovom prisutnošću ili stvoriti novu stilsku klasu bez donje crte i primijeniti je na ovu liniju.

Koristi se za prikaz nacrtane granice oko elementa. Debljina okvira postavlja se svojstvom border, a ako je border: 0 navedeno, okvir se ne prikazuje. S drugim vrijednostima obruba, slika uvijek ima prednost. Pozadina, ako je postavljena putem svojstva pozadine, prikazuje se ispod okvira.

Sintaksa

Slika ruba: nema | [<адрес> [<число> | <проценты>]{1,4} ? ] && {0,2}

Oznake

Vrijednosti

nijedan Ne prikazuje nacrtani obrub, koristi se postavljeni stil obruba.<адрес>Put do grafičke datoteke. Potreban parametar.

Sama slika za izradu okvira prikazana je na sl. 1 i sastoji se od devet područja: četiri kuta, gornji, desni, donji, lijevi bočni i središnji dio, u kojem se prikazuje sadržaj elementa.

Riža. 1. Slika za stvaranje okvira

<число>

Jedna, dvije, tri ili četiri vrijednosti koje označavaju veličinu dijelova slike u pikselima, čime se definiraju područja podjele. Same jedinice nisu napisane, samo broj (10, ne 10px na sl. 2 crvene linije označavaju područja potrebna za izradu okvira.

Riža. 2. Dijeljenje izvorne slike na područja

Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvojene razmakom. Učinak ovisi o broju vrijednosti i prikazan je u tablici. 1.

Utjecaj ovih parametara na izgled okvira prikazan je na sl. 3.

		krug

Riža. 3. Rezultat korištenja parametara rastezanja, ponavljanja i zaokruživanja

Primjer

Rezultat primjera prikazan je na sl. 4.

Riža. 4. Pogled okvira

Objektni model

Objekt.style.borderImage

Bilješka

Firefox prije verzije 15.0 podržava svojstvo -moz-border-image.

Safari prije verzije 6.0, Chrome prije verzije 15.0, Android prije verzije 4.4 podržava svojstvo -webkit-border-image.

Opera do verzije 15.0 podržava svojstvo -o-border-image.

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobravanja.

• Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
• Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
• Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
• Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.

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 ta 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žani.

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.

Obrubi 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 odgovorna za dizajn okvira počinju riječju "border", što se može prevesti kao "okvir", "obrub". 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 koristeći 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

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

Sintaksa

stil obruba: (1,4) | naslijediti

Vrijednosti

Postoji nekoliko vrijednosti za svojstvo stila obruba za kontrolu izgleda obruba. Izgled ovisi o korištenom pregledniku i postavljenoj debljini ruba. U tablici 1 prikazuje nazive stilova i rezultirajući okvir kada različita značenja 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 debljina (širina obruba) postavljena je na nulu. skriveno Ima isti učinak kao ništa osim primjene stila obruba na ćelije tablice koje imaju svojstvo sažimanja granice postavljeno na kolaps. U tom slučaju rub oko ćelije uopće se neće pojaviti. naslijediti Nasljeđuje vrijednost roditelja.

Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvojene 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

Objektni model

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

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 skrivene i naslijeđene vrijednosti.

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