Cadre și limite. Chenar dublu folosind CSS

Vlad Merjevici

Folosind CSS, puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, proprietatea de frontieră este folosită, ca cea mai universală, precum și conturul și, în mod surprinzător, box-shadow , a cărei sarcină principală este de a crea o umbră. În continuare, vom lua în considerare aceste metode și diferențele dintre ele.

proprietate de contur

Cea mai simplă proprietate pentru crearea cadrelor. Are aceiași parametri ca și border , dar diferă semnificativ în unele detalii:

• conturul este afișat în jurul elementului (chenar în interior);
• conturul nu afectează dimensiunile elementului (chenarul este adăugat la lățimea și înălțimea elementului);
• conturul poate fi setat numai în jurul întregului element, dar nu și pe părțile individuale (chenarul poate fi folosit pentru orice parte sau pentru toate deodată);
• conturul nu este afectat de raza de filet specificată de proprietatea border-radius (chenarul este afectat).

Se pune întrebarea - în ce cazuri este nevoie de contur, când rolul său, în ciuda diferențelor enumerate, este preluat complet de graniță? Nu există multe situații, dar apar:

• crearea de rame complexe multicolore;
• adăugarea unui cadru la un element atunci când treceți mouse-ul peste el;
• ascunderea chenarului pe care browserul îl adaugă automat unor elemente la primirea focalizării;
• pentru contur, puteți seta distanța de la marginea elementului la cadru folosind proprietatea outline-offset, pentru a crea .

Rame multicolore

Trebuie să înțelegeți că conturul nu înlocuiește în niciun caz chenarul și poate exista cu ușurință împreună cu acesta, așa cum se arată în exemplul 1.

Exemplul 1: Crearea unui cadru

În acest exemplu, în jurul elementului este adăugat un cadru negru, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Încadrați în jurul elementului

Cadru când se utilizează: hover

Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2).

Exemplul 2: Cadru pe Hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi modificați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, chenarul din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3: Cadru pe Hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, cele mai recente versiuni de Opera), un mic cadru colorat este afișat în jurul câmpurilor de formular atunci când acestea primesc focalizare (Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul marginilor

Exemplul 4. Scoaterea cadrului

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero; aceștia sunt responsabili pentru poziția umbrei și estomparea acesteia. Al patrulea parametru în acest caz este responsabil pentru grosimea chenarului, iar al cincilea setează culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră.

Exemplul 4: Utilizarea box-shadow

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru a percepe mai bine conținutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxa chenarului CSS

granita: border-width border-style chenar-culoare | moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (difer doar în lățime în pixeli)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • întreruptă - cadru format din liniuțe
  • solid - linie simplă (folosită cel mai des)
  • dublu - cadru dublu
  • groove - margine 3D canelată
  • creasta, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi specificat folosind un nume de culoare specific sau în format RGB (vezi numele culorilor html pentru site)

Notă

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

border-style: dashed

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

3. Толщина границы: свойство border-width

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;

• thin - тонкая толщина линии
• medium - средняя толщина линии
• thick - толстая толщина линии

Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin

border-width: medium

border-width: thick

Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

• border-top - для задания рамки сверху (верхняя граница)
• border-bottom - для задания рамки снизу (нижняя граница)
• border-right - для задания рамки справа (правая граница)
• border-left - для задания рамки слева (левая граница)

Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

Также есть свойства

• border-top-color - задание цвета верхний границы
• border-top-style - задание стиля верхней границы
• border-top-width - задание толщины верхней границы
• и т.д. для каждого направления

На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.

---

Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

Proprietatea border-width este responsabilă pentru lățimea chenarului, proprietatea border-style este responsabilă pentru stilul chenarului, iar proprietatea border-color este responsabilă pentru culoarea chenarului. Totul este clar cu prima și a treia proprietăți. Toate valorile pe care le poate lua proprietatea de tip chenar sunt prezentate în figura de mai jos:

Dacă ne deschidem acum pagina în browser, vom vedea că în jurul blocului a apărut un cadru roșu solid de 1 px lățime.

V-am arătat o intrare cadru lung în CSS (această intrare este foarte greoaie și, de obicei, nimeni nu o folosește). Toate instrucțiunile pot fi conținute pe o singură linie. În cazul nostru, va arăta astfel:

Chenar: 1px roșu continuu;

Acestea. Mai întâi indicăm grosimea cadrului, apoi indicăm stilul și culoarea cadrului.

Probabil ați observat că rama a apărut pe toate cele patru laturi. Cadrele pot fi setate pentru oricare dintre laturi separat (va fi clar cu un exemplu specific):

Chenar-sus: 2px roșu continuu; chenar-jos: 3px verde punctat; chenar-stânga: 6px galben punctat; chenar-dreapta: 5px dublu #fe54e5;

Puteți vedea că toate cele 4 părți au rame diferite. Dacă nu specificați un cadru pentru o parte, atunci nu va exista niciun cadru acolo.

Frame-urile sunt folosite absolut peste tot: este aproape dificil să găsești un site web care să nu folosească cadre. Foarte des, elementele de meniu sunt separate printr-o linie verticală, care este specificată de proprietatea border-right sau border-left. De asemenea, puteți crea efecte interesante pentru link-uri. Tema pentru acasă doar pe această temă:

Trebuie să creați o pagină și să plasați 2 link-uri pe ea. Stilul de design al acestor legături este o linie continuă; atunci când este plasată, această linie ar trebui să devină punctată.

De asemenea, este foarte bine să folosiți cadre pentru elemente atunci când așezați pagina pentru a înțelege mai bine unde se află fiecare element. Cel puțin, este mult mai clar și mai clar pentru mine să fac machete în acest fel.

Această proprietate creează o chenar în jurul unui element. Puteți citi mai multe despre această proprietate la link, iar în acest articol voi descrie în termeni generali cum funcționează. Aceste informații vor fi suficiente pentru a înțelege cum să faci cadre folosind CSS.

Sintaxa pentru proprietatea border este simplă: border: 1px solid black; . Această proprietate are trei semnificații:

• 1px - grosimea marginii.
• solid - tip cadru, solid este o linie continuă, dublu este o linie continuă dublă, întreruptă este o linie punctată. Există alte câteva tipuri de chenare, informații despre ele pot fi găsite aici: CSS border.
• negru - setează culoarea marginii. Culorile pot fi specificate după nume, valorile valide sunt aici: tabel de culori CSS, sau prin cod hexazecimal. Cum se face acest lucru este descris în articolul: culori în CSS.

cadru de text CSS

Iată un exemplu de utilizare a proprietății border pentru a crea un chenar cu lățime de un pixel și negru:

Acestui paragraf i se atribuie clasa exemplu-1.

În acest exemplu am folosit și proprietatea de umplutură CSS. Această proprietate specifică cantitatea de indentare de la text la contur (chenarul elementului).

Să ne uităm la un alt exemplu simplu, doar pentru a înțelege ideea. Să creăm un cadru de trei pixeli lățime, roșu și fără umplutură internă (proprietatea de umplutură CSS).

Acestui paragraf i se atribuie clasa exemplu-2.

După cum putem vedea, fără căptușeală, cadrul de text arată cu coarne.

Cum se face o ramă de imagine în CSS

Cadrele pentru imagini sunt setate în mod similar utilizând proprietatea chenar. Să facem un cadru verde de 4 pixeli grosime pentru imagine.

Exemplu-img ( chenar: 4px verde continuu; )

Iată cum va funcționa acest cod:

Cum să rotunjiți colțurile unui cadru în CSS

Rotunjirea colțurilor unui chenar în CSS se face folosind proprietatea border-radius. Această proprietate a fost introdusă în CSS3 și funcționează în toate browserele moderne.

Proprietatea border-radius poate avea de la una la patru valori. Dacă există o singură valoare, atunci stabilește gradul de rotunjire pentru toate colțurile. Să dăm un exemplu despre modul în care această proprietate va funcționa cu o singură valoare.

Exemplul-3 (chenar: 1px negru solid; chenar-rază: 15px; umplutură: 10px; )

Iată cum funcționează:

proprietate border-radius: 15px.>

Dacă blocul nu are chenar, atunci există o chenar-lățime: 0; , atunci zona umplută cu culoarea de fundal va fi rotunjită (proprietatea culoarea de fundal). Iată un exemplu:

Exemplul-4 (border-width: 0; // deși această valoare este 0 în mod implicit culoarea de fundal: #DDD; border-radius: 15px; padding: 10px; )

Iată cum funcționează acest exemplu:

proprietate border-radius: 15px.>

După cum am scris mai devreme, proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos descrie modul în care va funcționa fiecare combinație de valori.

Pentru proprietatea chenar-rază, valorile pot fi specificate ca procente.

Să desenăm un cerc în CSS. Pentru a face acest lucru, luați un bloc pătrat de 100 pe 100 de pixeli și rotunjiți colțurile cu regula CSS border-radius: 50% .

Exemplul-5 ( lățimea: 100px; înălțimea: 100px; culoarea fundalului: #F00; raza chenarului: 50%; )

Iată cum funcționează acest exemplu:

Aceasta acoperă complet subiectul „cadrelor în CSS”. Succes la invatarea CSS!

Pentru a controla chenarul unui element, utilizați proprietatea generică border. Această proprietate vă permite să setați grosimea, stilul și culoarea chenarului unui element într-o singură declarație.

Aceste trei proprietăți (grosimea chenarului, stilul chenarului și culoarea) pot fi setate într-o singură declarație. Iată un exemplu:

Puteți specifica un stil de chenar doar pe o parte a unui element. Pentru a face acest lucru, utilizați proprietățile border-top (bord superior), border-right (chenar dreapta), border-bottom (chenar jos), border-left (chenar stânga).

În acest exemplu, fiecare parte a blocului are o grosime, un stil și o culoare diferite a marginii.

Gândiți-vă cum ați putea crea o formă ca aceasta folosind CSS:

Valorile marginilor - grosime, stil și culoare - pot fi setate separat folosind proprietăți speciale.

• border-style - stil de chenar.
• border-width - lățimea chenarului.
• border-color - culoarea chenarului.

Să luăm în considerare fiecare dintre valori separat.

proprietate tip graniță Stil de chenar.

Proprietatea border-style stabilește stilul chenarului. În CSS, spre deosebire de HTML, chenarul unui element poate fi nu numai solid. Următoarele valori sunt acceptate pentru stilul de chenar:

1. none - fără chenar (implicit).
2. solid - chenar solid.
3. dublu - chenar dublu.
4. punctat - chenar punctat.
5. punctat - un chenar format dintr-o serie de puncte.
6. creasta - chenar „creastă”.
7. groove - margine „groove”.
8. inset - margine deprimată.
9. start - chenar extrudat.

Exemple de cum arată.

fără frontieră (niciuna)

margine solidă

chenar dublu

marginea unei serii de puncte (punctate)

margine întreruptă

marginea canelurii

marginea crestei

chenar indentat (inserat)

margine extrudată (început)

Apropo, dacă setați culoarea marginii la negru pentru cadrul de creastă, veți obține acest rezultat.

Un bloc div cu margine neagră și stil de creastă.

Cadrul pare solid, dar asta se datorează faptului că stilul de creastă este creat prin adăugarea unui efect de umbră neagră, iar efectul negru nu este vizibil pe un cadru negru.

Folosind proprietatea border-style, stilul chenar poate fi setat nu numai pentru toate laturile blocului. Este posibil să setați mai multe valori pentru o proprietate de tip chenar; în funcție de numărul de valori, stilul de chenar va fi atribuit unui număr diferit de laturi ale blocului. Puteți seta una, două, trei sau patru valori. Să ne uităm la exemple pentru fiecare caz.

O singură valoare (solid) - stilul de chenar este setat pentru toate laturile blocului.

Două valori (dublu solid) - prima valoare setează stilul pentru părțile de sus și de jos, a doua pentru partea laterală.

Trei valori (solid dublu punctat) - prima valoare pentru partea de sus, a doua pentru laturi, a treia pentru partea de jos.

Patru valori (liniate dublu punctată) - fiecare valoare pentru o parte în sensul acelor de ceasornic începând de sus.

Proprietatea border-width. Grosimea chenarului.

Pentru a seta lățimea chenarului unui element, utilizați proprietatea border-width. Grosimea marginii poate fi specificată în orice unitate de măsură absolută, de exemplu în pixeli.

Asemenea proprietății în stil de chenar, proprietatea poate fi setată la una până la patru valori. Să ne uităm la exemple pentru fiecare caz.

Exemplu de cod:

Există, de asemenea, valori ale cuvintelor cheie pentru proprietatea border-width. Sunt trei în total:

• subțire - margine subțire;
• medie - grosime medie;
• gros - chenar gros;

Grosimea chenarului: subțire.

Grosimea chenarului: medie.

Grosimea chenarului: gros.

Proprietatea chenar-culoare. Culoarea chenarului.

Pentru a controla culoarea chenarului, utilizați instrumentul pentru culoarea chenarului. Culorile pentru această proprietate pot fi setate folosind orice metodă descrisă în articolul „Culori în CSS”, și anume:

• Notația hexazecimală (#ff00aa) a culorii.
• Formatul RGB este rgb(255,12,110). Format RGBA pentru CSS3.
• Formatele HSL și HSLA pentru CSS3.
• Numele culorii, de exemplu negru. Pentru o listă completă a numelor de culori, consultați tabelul CSS Color Names.

Proprietatea culoare-chenar poate avea, de asemenea, una până la patru valori și le tratează în mod similar cu proprietățile anterioare.

O valoare (roșu).

Două valori (roșu negru).

Trei valori (roșu negru galben).

Patru valori (roșu negru galben albastru).

Acum să revenim la problema de mai sus și să desenăm o figură:

Iată codul care desenează o astfel de cifră, doar mai mare ca dimensiune:

Setarea valorilor pentru laturi separat

S-a menționat mai sus că puteți specifica valorile proprietăților de frontieră pentru o singură parte a unui bloc. Există proprietăți în aceste scopuri:

• border-top (chenar de sus)
• granita-dreapta
• chenar-de jos
• border-left (chenar din stânga)

Permiteți-mi să vă reamintesc că pentru toate proprietățile sunt specificate trei valori (grosime, stil și culoare) în orice ordine. Dar există proprietăți care vă permit să setați separat grosimea, culoarea și stilul pentru fiecare parte. Scrierea acestor proprietăți este derivată din cele de mai sus.

Opțiuni de margine de sus (border-top).

• border-top-color - setează culoarea chenarului superior al elementului.
• border-top-width - setează grosimea marginii superioare a elementului.
• border-top-style - setează stilul chenarului superior al elementului.

Opțiuni pentru marginea dreaptă (chenar-dreapta).

• border-right-color - setează culoarea chenarului drept al elementului.
• border-right-width - setează grosimea marginii drepte a elementului.
• border-right-style - setează stilul chenarului drept al elementului.

Opțiuni de margine de jos (border-bottom).

• border-bottom-color - setează culoarea marginii de jos a elementului.
• border-bottom-width - setează grosimea marginii de jos a elementului.
• border-bottom-style - setează stilul marginii de jos a elementului.

Opțiuni pentru marginea stângă (border-left).

• border-left-color - setează culoarea marginii din stânga a elementului.
• border-left-width - setează grosimea marginii din stânga a elementului.
• border-left-style - setează stilul marginii din stânga a elementului.

Un exemplu de utilizare a acestor proprietăți:

Proprietatea frontier-raza. Colțurile de margine rotunjite.

Proprietatea border-radius are scopul de a rotunji colțurile marginilor unui element. Această proprietate a fost introdusă în CSS3 și funcționează corect în toate browserele moderne, cu excepția Internet Explorer 8 (și versiunile mai vechi).

Valorile pot fi orice numere utilizate în CSS.

Proprietatea chenar-rază: 15px.

Dacă cadrul blocului nu este specificat, atunci fileul are loc cu fundalul. Iată un exemplu de bloc rotunjit fără chenar, dar cu o culoare de fundal:

Proprietatea chenar-rază: 15px.

Există proprietăți pentru rotunjirea fiecărui colț individual al unui element. Acest exemplu le folosește pe toate:

Chenar-sus-stânga-rază: 15px; raza-chenar-sus-dreapta: 0; raza-chenar-jos-dreapta: 15px; raza-chenar-jos-stânga: 0;

Proprietatea chenar-rază: 15px.

Deși acest cod poate fi scris într-o singură declarație: border-radius : 15px 0 15px 0 . Faptul este că proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos prezintă regulile care guvernează astfel de anunțuri.

După ce ați studiat cu atenție acest tabel, puteți înțelege că cea mai scurtă intrare pentru stilul dorit va fi astfel: border-radius : 15px 0 . Există doar două sensuri.

Puțină practică

Desenați o lămâie folosind CSS.

Iată codul pentru un astfel de bloc:

Marja: 0 auto; /* Centrați blocul */ lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px;

Am desenat deja figura:

Acum să lăsăm un triunghi din el:

Codul triunghiului este:

Marja: 0 auto; /* Centrați blocul */ padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea chenarului-de jos: roșu;