Mihai 2016-06-11 1 HTML și CSS 0

Cum se creează o chenar dublu în CSS?

Salutare tuturor. Știi cum să faci o chenar dublu în CSS? Dacă nu, atunci vă rugăm să citiți această scurtă notă. Faptul este că acest lucru nu se poate face folosind o bordură obișnuită; aici trebuie să mergi pe o altă cale.

Dacă specificați o chenar folosind proprietatea chenar, puteți specifica doar una. Dar de foarte multe ori designul poate necesita mai multe rame. În acest caz, ar trebui să utilizați un pseudo-cadru - o umbră.

Chenar dublu folosind box-shadow

În general, dacă doriți să studiați umbrele în CSS mai detaliat, vă sfătuiesc să citiți despre subiectul relevant. În acest articol, nu voi explica în detaliu sintaxa proprietății, ci pur și simplu voi arăta o tehnică despre cum să creați un chenar dublu. Deci, voi crea un bloc obișnuit și voi adăuga câteva stiluri la el. Blocul poate fi orice și cu orice conținut. În cazul meu, este un simplu div, deci cod html Nici nu o voi arăta. Și iată stilurile:

Div(
fundal: #E0D8A3;
latime: 180px;
înălțime: 110px;
umplutură: 12px;
}

Ei bine, un exemplu tipic de design bloc.
Acum să creăm un cadru dublu folosind mai multe umbre. Voi adăuga următoarea proprietate la stilurile blocului:

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

Cam asa arata:

După cum puteți vedea, a ieșit destul de frumos. Box-shadow are doar 5 parametri. Prima este deplasarea orizontală a umbrei, a doua este deplasarea verticală. Al treilea și al patrulea parametru sunt estomparea și întinderea. După cum puteți vedea, nu ne atingem deloc de primele trei. Nu avem nevoie de estompare pentru că vrem o umbră ascuțită. După cum puteți vedea, am prescris al patrulea parametru - întinderea. Determină cât de mare va fi umbra decât elementul de care este atașată.

În mod implicit, totul arată astfel - umbra are aceeași dimensiune ca elementul și se află clar sub ea. Dacă schimbați întinderea, umbra începe să iasă dincolo de element. Acesta este modul în care puteți crea chenare, exact la fel ca și cu proprietatea border. Ei bine, cu al cincilea parametru, cred că totul este clar - aceasta este culoarea umbrei.

După cum puteți vedea, am enumerat pur și simplu parametrii pentru fiecare umbră nouă, despărțiți prin virgule. Cred că ai ghicit deja că în același mod poți crea un cadru triplu etc. Nu există restricții aici. De fapt, în ceea ce mă privește, întrebarea este închisă, iar dacă aveți întrebări, le puteți scrie în comentarii.

Un moment al atentiei tale: Cu toții dorim să ne găzduim site-urile web pe găzduire de încredere. Am analizat sute de găzduiri și am găsit cele mai bune - HostIQ Sunt sute online feedback pozitiv despre asta, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie bine.

Bordurile sunt acele linii care înconjoară un element (conținutul pe care îl conține și umplutura din jurul acestuia). Un exemplu pe care l-am întâlnit deja sunt cadrele de celule din interiorul unui tabel.

CSS oferă două tipuri de margini: margini interioare și linii exterioare. Proprietăți CSS, responsabil pentru proiectarea cadrelor, începe cu cuvântul „border”, care poate fi tradus ca „Frame”, „Border”. Prezența și formatul conturului exterior sunt specificate de proprietăți care încep cu cuvântul „contur”. Contur, spre deosebire de chenar, nu afectează lățimea și poziția blocului încadrat. În plus, nu poate fi instalat doar pe o singură parte, așa cum frontieră- numai din toate părțile deodată.

Mai întâi, să vorbim despre designul graniței, apoi vom trece la contur.

lățimea graniței

Setează lățimea chenarului. Este clar că implicit elementul este înconjurat de rame pe patru laturi. Proprietatea vă permite să setați lățimea chenarelor fie aceeași pentru toate părțile, fie diferită pentru fiecare parte. În funcție de lățimea care trebuie alocată cărora marginile, puteți specifica de la una până la patru valori în regulă.

Puteți seta lățimea folosind pixelii, procentele și alte unități de lungime CSS obișnuite sau cuvinte rezervate subţire(2px), mediu(4px) și gros(6px).

Lățimea chenarului: 16px 12px 4px 8px;

stil de bordura

Definește stilul de chenar. Rețineți că dacă nu setați această regulă, ci specificați proprietatea lățimea graniței, atunci nu vor fi deloc cadre, așa că dacă doriți chenare vizibile, asigurați-vă că specificați stil de bordura.

O proprietate poate avea destul de multe valori, toate fiind clar demonstrate în figura de mai jos.

Ultimul paragraf arată că stilul, ca și grosimea, al cadrului pe fiecare parte poate fi propriu:

stil de chenar: plin dublu punctat niciunul

chenar-culoare

Funcționează la fel ca și proprietățile anterioare, dar este responsabil pentru culoarea marginilor. De asemenea, îl puteți seta de la una la patru valori și știți deja rezultatul. Dacă regula nu este setată, cadrele vor avea culoarea textului elementului curent sau, dacă aceasta nu este specificată, culoarea textului elementului părinte.

Culoare chenar: #C85EFA;

frontieră

Ușurează scrierea și salvează codul, permițându-vă să setați toate proprietățile enumerate pentru chenarele de pe toate părțile unui element într-o singură linie:

P (chenar: 2px verde continuu; )

Pentru a seta reguli diferite pentru cadre pe diferite laturi, puteți utiliza următoarele valori:

• border-top- Limita superioară.
• granita-dreapta- dreapta.
• chenar-de jos- inferior.
• granița-stânga- stânga.

P (chenar-stânga: 6px galben punctat; )

lățime-contur

La fel ca lățimea graniței, doar pentru cadrul exterior, nu și cel interior. Setează grosimea conturului în aceleași valori ca lățimea graniței. Pe lângă grosimea cadrului elementului, trebuie să specificați stilul acestuia, altfel nu va exista un contur.

stil de contur

Valorile proprietăților dublează valorile stil de bordura. Regula specifică stilul conturului exterior.

Descriere

Proprietatea chenar generică vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element. Valorile pot fi în orice ordine, separate printr-un spațiu; browserul însuși va determina care dintre ele corespunde proprietății dorite. Pentru a seta un chenar numai pe anumite laturi ale unui element, utilizați proprietățile border-top , border-bottom , border-left , border-dreapta.

Sintaxă

Valori

Valoarea lățimii chenarului determină grosimea chenarului. Sunt furnizate mai multe valori de tip chenar pentru a-i controla aspectul. Numele lor și rezultatul acțiunii sunt prezentate în Fig. 1.

Fig.1. Stiluri de cadru

border-color setează culoarea chenarului, valoarea poate fi în orice format permis de CSS.

moștenire moștenește valoarea părintelui.

HTML5 CSS2.1 IE Cr Op Sa Fx

ÎN în acest exemplu Se adaugă un chenar dublu în jurul stratului. Rezultatul este prezentat în Fig. 2.

Orez. 2. Aplicarea proprietăţii de frontieră

Model obiect

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

Browsere

Browser Internet Explorer până la a șasea versiune inclusiv, cu o grosime a marginii de 1 px, se afișează punctat ca punct . Cu o grosime de 2 px și mai mare, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile blocului are o grosime de 2 px sau mai mare, atunci în IE7 valoarea punctată se transformă în punct.

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.

Stilul de chenar în browsere diferite poate varia ușor atunci când se utilizează valori de canelură , creastă , de inserare sau de început.

Ramele au o varietate de utilizări, de exemplu ca element decorativ sau pentru a separa două obiecte. CSS oferă nenumărate opțiuni pentru utilizarea chenarelor.

Grosimea ramei

Lățimea chenarului este determinată de proprietatea border-width, care poate avea valorile subțire, mediu și gros, sau o valoare numerică în pixeli. Figura prezintă acest sistem:

Culoarea cadrului

Proprietatea border-color specifică culoarea chenarului. Valorile sunt valori normale de culoare, de exemplu: „#123456”, „rgb(123,123,123)” sau „galben”.

Tipuri de rame

Exista Tipuri variate cadru Cele opt tipuri de cadre și interpretarea lor în Internet Explorer 5.5 sunt prezentate mai jos. Toate exemplele sunt afișate în culoarea „aurie” și în grosimea „groasă”, dar pot fi afișate, desigur, în alte culori și grosimi.

Valorile none sau hidden pot fi folosite dacă nu doriți să afișați chenarul.

Exemple de cadre definitorii

Cele trei proprietăți discutate mai sus pot fi combinate în fiecare element și, în consecință, pot fi setate cadre diferite. Pentru a ilustra, să aruncăm o privire asupra documentului, care definește diferite cadre pentru

,

,

Și

Rezultatul poate să nu fie atât de impresionant, dar arată câteva posibilități:

H1 ( lățime chenar: gros; stil chenar: punctat; culoare chenar: auriu; ) h2 ( lățime chenar: 20px; stil chenar: început; culoare chenar: roșu; ) p ( lățime chenar: 1px; stilul chenarului: punctat; culoarea chenarului: albastru; ) ul ( lățimea chenarului: subțire; stilul chenarului: solid; culoarea chenarului: portocaliu; )

De asemenea, puteți seta proprietăți speciale pentru marginile de sus, de jos, din dreapta și din stânga ale cadrului. Iată cum se face:

H1 ( lățime-chenar-sus: gros; stil-chenar-sus: plin; culoarea chenar-sus: roșu; lățime-chenar-jos: gros; stilul chenar-jos: solid; culoarea chenar-jos: albastru; border-right-width: gros; border-right-style: solid; border-right-color: verde; border-left-width: gros; border-left-style: solid; chenar-stânga-culoare: portocaliu; )

Notație scurtă

Ca și în cazul multor alte proprietăți, puteți combina mai multe proprietăți într-una singură folosind cuvântul chenar. Exemplu:

P (lățime chenar: 1px; stil chenar: solid; culoare chenar: albastru; )

poate fi combinat in:

P (chenar: 1px albastru solid; )

rezumat

În acest tutorial, ați învățat despre posibilitățile nelimitate ale CSS atunci când utilizați chenare.

În lecția următoare ne vom uita la modul de definire a dimensiunilor într-un model de cutie - înălțime și lățime.

Border-image este o proprietate care vă permite să setați imagine de fundal pentru cadrul elementului. Proprietatea umple un cadru cu o imagine dată, distribuind părți ale imaginii astfel încât părțile de colț să fie în colțurile cadrului, iar spațiile dintre ele să fie umplute cu restul imaginii.

Această proprietate face mai ușor să faci lucruri incredibile care anterior necesitau 3 până la 8 imagini și manipularea marcajului.

Actualizare: Firefox funcționează începând cu versiunea 29.

Dimensiunea imaginii este egală cu grosimea cadrului. Culoarea și stilul cadrului sunt ignorate.

Dacă specificați doar border-image-source , imaginea va umple colțurile, neștiind ce să faceți în continuare:

Chenar: 80px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Chenar-imagine-slice

O proprietate importantă care determină dimensiunea piesei de imagine care va umple colțurile cadrului. Părțile rămase vor fi folosite pentru a umple spațiul dintre colțuri conform algoritmului specificat în border-image-repeat .

Valori posibile:

<проценты>- calculat raportat la dimensiunea imaginii. Orizontală în raport cu lățimea, verticală - în raport cu înălțimea.<числа>- pixeli (pentru bitmap) sau coordonate (pentru vector). Unitățile de măsură nu sunt indicate. completati - cuvânt cheie, completând valorile anterioare. Dacă este specificată, imaginea nu este tăiată de marginea interioară a cadrului, ci umple și zona din interiorul cadrului. Foarte util pentru rame rotunjite.

Pentru a defini valori pentru fiecare parte, pot fi specificate mai multe valori separate printr-un spațiu.

Suma valorilor laturilor opuse trebuie să fie mai mică decât dimensiunea imaginii, altfel nu va exista nimic care să umple spațiul dintre colțuri.

Chenar: 80px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 100;

Chenar-imagine-repetare

Proprietatea determină modul în care golurile dintre colțuri vor fi umplute.

Valori posibile: stretch - întinde zona de umplere a imaginii. Valoare implicită; repetă - repetă secțiunea de umplere, în timp ce îmbinările cu imaginea colțului sunt vizibile; rotund - umple golul dintre colțuri. O cusătură poate fi vizibilă în mijlocul lateralului. Cea mai atentă acțiune. spațiu - acționează similar cu repetarea. Nu am gasit nicio diferenta.

Puteți seta două valori simultan, prima va fi responsabilă pentru comportamentul imaginii în cadrele de sus și de jos, a doua - pentru stânga și dreapta.

Imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 100; border-image-repeat: repetare;

În stânga este repetat , în dreapta este rotund .

Dacă cadrul este complex și părțile laterale nu se potrivesc bine între ele, întinderea va funcționa mai corect, iată un exemplu.

Chenar-imagine-lățime

chenar-imagine-lățime

Proprietatea controlează lățimea părții vizibile a cadrului și o scalează. Dacă această valoare este mai mare decât lățimea chenarului , imaginea chenarului se va accesa cu crawlere sub conținut, chiar dacă proprietatea de umplere nu este setată.

Valori posibile:<длина>- valori în px sau em;<%>- valori procentuale raportate la dimensiunea imaginii;<числа>- valoare numerică cu care se înmulțește auto lățimea marginii - cuvânt cheie. Dacă este dată, valoarea este egală cu border-image-slice corespunzătoare. Dacă nu există o dimensiune adecvată, se folosește valoarea lățimii marginii, iar imaginea umple întregul colț al cadrului, trecându-se sub conținut. Funcționează puțin ciudat.

Chenar: 60px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 80; chenar-imagine-repetare: rotund; lățime-imagine-chenar: 160px;

În dreapta este un cadru cu margine-image-width . Exemplul din stânga arată cum imaginea a fost tăiată de marginile interioare ale cadrului. Datorită lățimii crescute, cadrul din dreapta s-a târât sub conținut.

Chenar-imagine-început

O proprietate interesantă care vă permite să mutați cadrul în afara elementului. Valorile negative nu sunt acceptate.

Valori posibile:<длина>- valori în px sau em;<числа>- valoarea numerică cu care se înmulțește lățimea chenarului.

Chenar: 60px solid transparent; imagine-chenar: url("http://img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png"); chenar-imagine-slice: 120; chenar-imagine-repetare: rotund; margine-imagine-început: 60px 10px 50px 120px;

În dreapta este un exemplu cu border-image-outset . Această proprietate nu afectează dimensiunea elementului, iar cadrul se poate suprapune elementelor adiacente.