Cadrul în jurul imaginii, webreference

Pentru a adăuga un cadru colorat în jurul valorii de imagine folosit proprietatea de frontieră stilistice. În stilul acestei proprietăți se adaugă la img selector si specifica grosimea ramei, culoarea și stilul său. Apoi, cadrul va fi adăugat la toate imaginile de pe pagină. Pentru desenele selectate pot introduce propria clasă și scrie-l numai pentru elementele selectate (Exemplul 1).

Exemplul 1. Adăugarea cadrului

În acest exemplu, cele două imagini sunt adăugate clasa de frontieră. prin care cadrul verde este setat (Fig. 1).

Cadrul în jurul imaginii, webreference

Fig. 1. Cadrul în jurul fotografiei

Cadrul poate fi adăugat, iar atunci când treceți peste o imagine printr-o pseudo-: Hover. Dar este de așteptat va conduce la o schimbare a imaginii, deoarece proprietatea de frontieră afectează lățimea totală și înălțimea elementului. Pentru a evita un astfel de comportament la un img cadru invizibil selector anterior adăugat așa cum este prezentat în Exemplul 2.

Exemplul 2. Cadrul în jurul imaginilor

Un alt mod de a adăuga cadre - proprietăți de utilizare schiță. Este, spre deosebire de frontieră. Ea nu afectează dimensiunea elementului, astfel încât cadrul transparent, nu mai este necesară.

În ciuda similitudinii acestor proprietăți, ele au mici diferente:

  • este afișat în jurul elementului de contur (de frontieră în interior);
  • schiță nu afectează dimensiunea elementului (de frontieră se adaugă la lățimea și înălțimea unui element);
  • schiță poate fi instalat numai din jurul întregului element, dar nu și pe părți separate ale (frontiera poate fi folosit pentru orice parte sau dintr-o dată);
  • Ea nu acționează pe conturul de rotunjire raza specificată de proprietate border-radius (care acționează la frontiera).

O altă modalitate de a crea cadrul este de a adăuga de fond la . Sam de fond nu este imediat vizibil, așa că trebuie să se stabilească mai multe proprietăți de umplutură. valoarea sa se reliefează deasupra grosimii (exemplul 3).

Exemplul 3. Folosind fundal și padding

Aceasta poate include, de asemenea, la granița de proprietate și de a obține un nou tip de cadru. In general, prin combinarea umplutură. de frontieră. schiță și fundal pot face o mulțime de cadre diferite.