Crearea granițelor în CSS. Proprietate de frontieră

Una dintre aplicațiile distractive ale proprietății CSS3 box-shadow este crearea unui chenar dublu în jurul unui element. Un efect foarte interesant pentru decorarea paginii, dar va funcționa doar în versiunile mai noi ale browserelor care acceptă box-shadow.

Cu toate acestea, există câteva alte metode pentru a crea acest efect. Mai mult, utilizarea evidentă a unei imagini de fundal este foarte departe de a fi ideală.

Acest tutorial prezintă cinci metode pentru crearea unui chenar dublu în jurul unui element. Și doar unul dintre ele necesită o imagine, în timp ce toate celelalte folosesc cod CSS pur cu suport excelent în browsere.

Metoda 1: chenar și contur

Această metodă funcționează numai în browserele care acceptă proprietatea outline (toate cu excepția IE6 / 7). Adăugați atât proprietăți de chenar, cât și de contur elementului.

Unul (chenar: solid 6px #fff; conturul: solid 6px # 888;)

Motivul pentru care această metodă funcționează este că cadrul de contur desenează întotdeauna în exteriorul dreptunghiului. Problema cu proprietatea contur apare atunci când sunt utilizate elemente plutitoare, deoarece chenarul se suprapune cu elementele adiacente.

Metoda 2: pseudo element

Această metodă necesită poziționarea absolută a cadrului:

Două (chenar: solid 6px #fff; poziție: relativă; z-index: 1;) .două: înainte (conținut: ""; afișare: bloc; poziție: absolut; sus: -12px; stânga: -12px; chenar: solid 6px # 888; lățime: 312px; umplutură de jos: 12px; înălțime minimă: 100%; z-index: 10;)

Punctele cheie sunt setarea proprietății z-index (astfel încât pseudo-elementul să se suprapună cu conținutul), poziționarea și valoarea minimă a înălțimii. Această din urmă proprietate păstrează elasticitatea cadrului.

Metoda 3: umbra

Cea mai bună metodă, deoarece necesită doar o linie de cod cu setările proprietății box-shadow.

Trei (box-shadow: 0 0 0 6px #fff, 0 0 0 12px # 888;)

Două umbre sunt folosite pentru a crea un chenar dublu. Ele sunt separate prin virgule. Neclaritatea este setată la 0. Deoarece a doua umbră se suprapune cu prima, are o lățime de două ori mai mare. Punctul cheie este utilizarea culorilor opace, care creează o graniță clară între cadre.

La fel ca proprietatea outline, box-shadow nu afectează elementele adiacente și le poate suprapune. Prin urmare, este necesar să se stabilească un câmp pentru a forma aspectul compoziției.

Desigur, suportul pentru proprietatea box-shadow este limitat la browserele mai noi.

Metoda 4: elementul extra div

Această metodă utilizează un element extern

pentru a afișa un chenar dublu. Singura metodă care funcționează peste tot:

Patru (chenar: solid 6px # 888; fundal: #fff; lățime: 312px; înălțime minimă: 312px;) .four div (lățime: 300px; înălțime minimă: 300px; fundal: # 222; marjă: 6px automat; overflow : ascuns ;)

Elementul exterior este puțin mai mare, dând iluzia unui chenar dublu.

Metoda 5: proprietatea bordur-image

O altă tehnică nouă este proprietatea CSS3 border-image, adesea trecută cu vederea:

Cinci (border-width: 12px; -webkit-border-image: url (multiple-borders.gif) 12 12 12 12 repetare; -moz-border-image: url (multiple-borders.gif) 12 12 12 12 repetare; imagine-chenar: url (chenaruri multiple) 12 12 12 12 repetare; / * pentru Opera * /)

Stii alta metoda?

Desigur, aici sunt colectate metode cunoscute și utilizate pe scară largă. Dar poate știi un truc. Distribuie cititorilor tăi în comentarii.

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

Cum se face chenarul dublu în css?

Bună ziua tuturor. Știi cum să dublezi chenarul în css? Dacă nu, vă rugăm să citiți această mică notă. Ideea este că nu poți face asta cu o chenară obișnuită, trebuie să mergi în altă direcție.

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

Bord dublu cu casetă-umbră

În general, dacă doriți să studiați umbra în css mai detaliat, atunci vă sfătuiesc să citiți despre subiectul relevant. În acest articol, nu voi explica în detaliu sintaxa proprietății, ci pur și simplu vă voi arăta un truc despre cum să creați un chenar dublu. Deci, să creăm un bloc obișnuit, căruia îi voi aloca unele stiluri. Blocul poate fi orice și cu orice conținut. În cazul meu, este un simplu div, așa că nici nu voi afișa codul html. Ș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 chenar dublu folosind mai multe umbre. Voi adăuga următoarea proprietate la stilurile de bloc:

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

Așa arată:

După cum puteți vedea, a ieșit destul de frumos. Există doar 5 parametri în box-shadow. Prima este deplasarea orizontală a umbrei, a doua este 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 mult va fi umbra mai mare 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, atunci 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 doar parametrii pentru fiecare umbră nouă, despărțiți prin virgule. Cred că ați ghicit deja că puteți crea o chenar triplă etc., în același mod. Nu există restricții aici. De fapt, în ceea ce mă privește, întrebarea este închisă, dar dacă aveți întrebări, le puteți scrie în comentarii.

Doar un moment al atenției tale: Cu toții dorim să ne găzduim site-urile pe o găzduire de încredere. Am analizat sute de găzduiri și am găsit-o pe cea mai bună - HostIQ Există sute de recenzii pozitive despre el online, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie fericite.

Ramele pot fi folosite în multe feluri, de exemplu ca element decorativ sau pentru a separa două obiecte. CSS oferă nenumărate opțiuni pentru utilizarea cadrelor.

Grosimea ramei

Grosimea chenarului este determinată de proprietatea border-width, care poate fi subțire, medie și groasă, sau o valoare numerică în pixeli. Figura prezintă acest sistem:

Culoarea cadrului

Proprietatea border-color definește culoarea chenarului. Valorile sunt valori normale de culoare, cum ar fi „# 123456”, „rgb (123,123,123)” sau „galben”.

Tipuri de cadre

Există diferite tipuri de rame. Cele opt tipuri de cadre și interpretarea lor în Internet Explorer 5.5 sunt prezentate mai jos. Toate exemplele sunt afișate cu culoarea „auriu” și grosimea „gros”, dar, desigur, pot fi afișate într-o culoare și o grosime diferită.

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 stabili cadre diferite. Pentru a ilustra, aruncați o privire la un document care definește diferite cadre pentru

,

,
    și

    Rezultatul poate să nu fie la fel de impresionant, dar demonstrează 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; stil de chenar: punctat; culoare chenar: albastru;) ul (lățimea chenarului: subțire; stilul chenarului: solid; culoarea chenarului: portocaliu;)

    De asemenea, puteți seta proprietăți personalizate pentru marginile de sus, de jos, din dreapta și din stânga ale cadrului. Iată cum să o faci:

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

    Notație prescurtată

    Ca și în cazul multor alte proprietăți, puteți combina mai multe proprietăți într-una singură folosind chenarul cuvântului. 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 cadre.

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

    Proprietate CSS – « frontieră», Vă permite să setați grosimea, culoarea și tipul liniei de perimetru în jurul elementului. Parametrii acestei proprietăți pot fi scriși pe o singură linie, despărțiți prin spații și în orice ordine.

    • - lățimea liniei de un pixel
    • - linie solida
    • - Culoare alba
    • - culoare neagră
    • - culoare gri

    Chenar element solid

    Chenarul elementului punctat

    Chenar cu elemente punctate

    Chenar element cu linie dublă

    Proprietatea secțiunilor individuale ale graniței

    Cadru ondulat încorporat în volum

    Cadru ondulat convex în volum

    Cadru deprimat volumetric

    Cadru volumetric convex

    Tutoriale / CSS /

    Lecția 7. Încadrați un element CSS

    Aproape fiecare site folosește o proprietate care creează o chenar în jurul unui element. Este necesar fie pentru butoane, fie pentru blocuri cu text. Pentru a crea un chenar, un element din CSS are două proprietăți: chenar și contur. Să le luăm în considerare.

    frontieră

    Această proprietate este necesară pentru a seta o chenar în jurul unui element, indică marginea acestuia într-un document web, lățimea chenarului este luată în considerare la poziționarea elementului. Are 3 valori - culoare, grosime și tip de cadru.

    Sintaxa pentru proprietatea border este următoarea:

    chenar: Latime Tip Culoare;
    Puteți alege o ordine diferită de specificare a valorilor proprietăților, dar principalul lucru este printr-un spațiu.

    Grosimea (lățimea) cadrului trebuie specificată în pixeli (px) sau procent (%).
    Culoarea poate fi specificată fie în format RGB (Red Green Blue), fie în cod HTML HEX.

    Mai jos sunt TIPURI DE LINIE cu numele lor:

    Cum se stabilesc chenarele unui element? Facem după cum urmează:

    #bloc (
    chenar: 3px solid # 0085cc; / * setează o linie albastră de 3 px * /
    }

    Dacă doriți să instalați unu-doi-trei cadre dintr-o anumită parte, apoi indicăm astfel:

    chenar-top- cadru deasupra;
    chenar-de jos- rama in jos;
    granița-stânga- rama in stanga;
    granita-dreapta- rama in dreapta;

    Bloc (
    chenar-dreapta: 3px solid # 0085cc;
    chenar-jos: 2px punctat # 0085cc;
    }

    Dacă doriți să îndepărtați cadrele element în CSS, apoi scrieți în chenarul proprietății - niciunul

    Gol (
    chenar: niciunul; / * elementul cu clasa goală nu va avea chenar * /
    }

    contur

    Contur este proprietatea de care aveți nevoie pentru a seta marginea exterioară a unui element.

    Există două diferențe față de graniță:
    În primul rând, linia dată în contur NU va afecta poziția cutiei în sine, lățimea și înălțimea acesteia.
    În al doilea rând, nu există posibilitatea de a instala un cadru dintr-o anumită parte.
    Sintaxa este aceeași cu border.

    contur: 2px punctat # 0085cc; / * chenar albastru punctat de 2 pixeli * /
    Pentru contur, precum și pentru chenar, puteți elimina chenarele tastând niciunul:

    Multumesc pentru atentie!

    Articolul anterior
    Lecția 6.

    Limitele elementului.

    Umplutură și margini în CSS. Ce sunt marginile și umplutura? Articolul următor
    Lecția 8. Cum să setați culoarea textului și fundalul unui element în CSS?

    Comentarii la articol (vk.com)

    frontieră

    Suport pentru browser

    12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

    Descriere

    Proprietatea CSS vă permite să setați simultan lățimea, stilul și culoarea pentru marginea blocului. Chenarul blocului este o linie / cadru obișnuit care înconjoară blocul pe toate părțile. Trebuie avut în vedere că atunci când adăugați o chenar, aceasta va afecta dimensiunea totală a blocului.

    Valorile sunt separate printr-un spațiu și pot fi în orice ordine, browserul va determina care dintre ele se potrivește cu parametrul necesar. Toate cele trei valori sunt opționale, lățimea și/sau culoarea pot fi omise, caz în care valoarea setată pentru proprietatea implicită va fi folosită în locul valorii lipsă, de exemplu. dacă, de exemplu, nu este specificată lățimea, atunci valoarea implicită a proprietății va fi utilizată. Tabelul de sub sintaxă conține valorile proprietăților pe care le puteți utiliza.

    Notă: Pentru a seta chenare numai pe anumite laturi ale unui element, utilizați următoarele proprietăți: chenar-sus, chenar-jos, chenar-stânga, chenar-dreapta.

    Sfat: În general, atunci când utilizați un chenar, trebuie să adăugați umplutură.

    Proprietate CSS: chenar

    Acestea adaugă spațiu alb între cadrul blocului și conținutul acestuia: text, imagini sau etichete copil. De obicei, chenarul este afișat aproape de conținutul elementului, acest lucru este util doar dacă trebuie să setați un chenar în jurul imaginii.

    Sintaxă

    border: border-width border-style border-color | moștenire;

    Valorile proprietăților

    Exemplu

    Exemplu

    Există ceva text aici.

    Rezultatul acestui exemplu într-o fereastră de browser:

    Cum să setați culoarea, stilul și dimensiunea chenarului în casete.

    În limbajele de marcare, chenarul ( frontieră), au doar tabele, poze si rame, in unele cazuri se poate seta culoarea chenarului si atat.

    Atribut de frontieră

    Foile de stil în cascadă ne oferă mai multe opțiuni, dar pe primul loc.

    În CSS, putem controla lățimea graniței cu lățimea graniței, sau pentru a fi mai precis, putem controla grosimea fiecărei părți separat:
    margine-sus-latime- grosimea marginii superioare
    bordura-dreapta-latime- grosimea marginii drepte
    chenar-latime-jos- grosimea marginii inferioare
    chenar-stânga-lățime- grosimea marginii stângi
    Dar poate exista și o formă scurtă:
    P (lățimea chenarului: sus dreapta jos stânga;)(sus dreapta jos stanga).
    Lățimea bordului poate fi setată:
    cifre DIV (border-width: 5px), de la zero la infinit, i.e. pozitiv.
    subţire- chenar subțire, DIV (border-width: subțire)
    mediu- chenar mediu, DIV (border-width: medium)
    gros- chenar gros, DIV (border-width: gros)
    Cu numere este clar, dar cu aceste valori totul depinde de browser, dar totuși subţire<= medium <= thick .

    De asemenea, putem controla culoarea chenarului cu chenar-culoare sau pentru a fi mai precis cu culoarea fiecărei părți:
    chenar-top-culoare culoarea marginii superioare;
    chenar-dreapta-culoare culoarea marginii din dreapta;
    culoarea-fond-chenar culoarea marginii inferioare;
    chenar-stânga-culoare culoarea chenarului din partea stângă.
    Valoarea culorii este setată ca pentru culoare, adică una din cele 16 culori: acva, negru, albastru, fucsia, gri, verde, tei, maro, bleumarin, măsline, violet, roșu, argintiu, verdeață, alb sau galben, pot fi setate și culorile: culoare: # 000000, culoare: # AF0 , culoare: rgb (255,0,0) sau culoare: rgb (100%, 0%, 0%).
    Indiferent de schema de culori pe care o alegeți, browserele o vor traduce în continuare culoare: rgb (255,0,0)... De exemplu culoare: var = culoare: # 00ff00 = culoare: # 0F0 = culoare: rgb (0%, 100%, 0%), dar pentru browser nu contează culoare: rgb (0,255,0), adică va calcula această valoare.

    Dacă grosimea și culoarea marginii pot fi controlate de HTML, atunci stilul ( stil de bordura) Numai CSS !!!
    Stilul poate fi controlat de fiecare parte separat:
    stil bordur-top stilul chenarului superior;
    chenar-dreapta-stil stilul marginii drepte;
    stil de margine de jos stilul marginii de jos;
    border-stânga-stil stilul chenarului din partea stângă.
    Acum să ne uităm la valorile stilului:
    1)stil de chenar: niciunul- Aceasta este valoarea implicită, similară cu lățimea chenarului: 0.
    2)border-style: ascuns- La fel, cu excepția tabelelor, pe care le vom analiza mai târziu.
    3)stil de chenar: punctat- Chenar punctat.
    4)stil de chenar: punctat- Chenar cu linie punctată.
    5)stil de chenar: solid- Chenar cu linie continuă, de ex. ca în HTML.
    6)chenar-stil: dublu- Chenar cu linie continuă dublă, aici aveți nevoie de o lățime a chenarului de cel puțin 3 pixeli.
    7)chenar-stil: canelura- Chenarul arată ca și cum ar fi fost tăiat în pânză.
    8)border-style: creasta- Chenarul pare să iasă din pânză.
    9)chenar-stil: insert- Întreaga cutie arată ca și cum ar fi presată în pânză.
    10)border-style: start- Opus celui precedent.
    Unele browsere pot ignora valorile punctate, întrerupte, duble, groove, creastă, inset și start și le pot scoate ca solide, de exemplu. hotarul obisnuit.

    Desigur, toate acestea sunt așa, dar toate exemplele de mai sus sunt doar un principiu de funcționare, nu un mecanism.
    Proprietatea regulilor frontieră implică (chenar: dimensiune stil culoare;), această regulă este executată dacă toate cele trei valori sunt prezente și numai în această ordine, de exemplu H1 (chenar: 5px dublu roșu;), dar pot exista excepții dacă aceste valori sunt furnizate de limbaje de marcare, de exemplu, pentru un tabel TABEL (chenar: 2px), adică este specificată o singură valoare.

    Pentru a gestiona nu întreaga bordură, ci fiecare parte separat, există reguli:
    (border-top: culoare stil dimensiune;) Control bord superior;
    (chenar-dreapta: culoare stil dimensiune;) Control bordura pe dreapta;
    (chenar-jos: culoare stil dimensiune;) Control bord inferior;
    (chenar-stânga: culoare stil dimensiune;) Comandă borduri pe stânga.
    Aceste reguli pot fi folosite separat sau toate împreună.

    Excepția este această regulă:
    H1 (
    chenar: 4px verde continuu;
    }

    Chestia este că în CSS ultima regulă are cea mai mare prioritate, în acest caz proprietatea border conține border-left și, prin urmare, regula border-left va fi ignorată, chiar așa:
    H1 (
    chenar: 4px verde continuu;
    chenar-stânga: 2px dublu roșu;
    }

    De la început, am stabilit regulile pentru întreaga bordură, iar apoi pentru zonele individuale.

    Am totul pe margini pentru elemente, cu excepția faptului că vom lua în considerare unele proprietăți când ajungem la tabele și alte excepții.

    CSS: chenar. Limitele elementului.

    Borduri CSS3

    Borduri CSS3

    Cu CSS3, puteți crea chenare rotunjite, adăugați umbre containerelor și utilizați o imagine ca chenar - fără a utiliza un program de design precum Photoshop.

    În acest tutorial, veți afla despre următoarele proprietăți de chenar:

    • hotar-raza
    • cutie-umbră
    • chenar-imagine

    Suport pentru browser

    Proprietate Suport pentru browser
    hotar-raza
    cutie-umbră
    chenar-imagine

    Internet Explorer 9 acceptă unele dintre noile proprietăți de chenar.

    Firefox necesită prefixul -moz- pentru imaginea de margine.

    Chrome și Safari necesită prefixul -webkit- pentru imaginea de margine.

    Opera necesită prefixul -o- pentru imaginea de margine.

    Safari necesită, de asemenea, prefixul -webkit- pentru box-shadow.

    Opera acceptă noi proprietăți de frontieră.

    CSS3 Colțuri rotunjite

    Adăugarea colțurilor rotunjite la CSS2 a fost dificilă. A trebuit să folosim imagini diferite pentru fiecare colț.

    În CSS3, crearea colțurilor rotunjite este ușoară.

    În CSS3, proprietatea border-radius este folosită pentru a crea colțuri rotunjite:

    Acest bloc are colțurile rotunjite!

    CSS3 Box Shadow

    În CSS3, proprietatea box-shadow este folosită pentru a adăuga umbre la containere:

    CSS3 Border-Imagine

    Cu proprietatea CSS3 border-image, puteți utiliza o imagine pentru a crea o chenar:

    Proprietatea border-image vă permite să specificați o chenar-imagine!

    Imaginea originală folosită pentru a crea chenarul este a ta:

    Noi proprietăți de frontieră

    Atribut de frontieră

    Atribut de frontieră, etichetă

    , folosit pentru a specifica grosimea chenarului din jurul tabelului.

    Borduri HTML

    Este permisă utilizarea marginii fără valori, atunci grosimea marginii va fi egală cu un pixel. În mod implicit, cadrul este afișat cu efecte 3D, dar dacă aplicați suplimentar atributul de fundal, cadrul va deveni „plat”.

    În plus, dacă atributul de margine este diferit de zero, atunci browserele afișează și chenare subțiri în jurul celulelor în sine. Afișarea acestor limite poate fi controlată folosind atributul reguli.

    Valorile

    Valoarea atributului poate fi orice număr nenegativ care specifică dimensiunea în pixeli.

    Valoare implicită: 0.

    Sintaxă

    Atribut obligatoriu: Nici unul.

    Exemplu HTML: aplicarea atributului Border

    Exemplu de rezultat

    Rezultat. Aplicarea atributului border.

    Proprietatea border CSS are aliasuri 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

    frontieră: 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 (se deosebesc doar prin lățime în pixeli)
    • border-style - stilul chenarului redat. Poate lua următoarele valori
      • niciunul sau ascuns - anulează granița
      • punctat - cadru punctat
      • dashed - cadru liniuță
      • solid - linie simplă (folosită cel mai des)
      • dublu - chenar dublu
      • groove - chenar canelat 3D
      • creasta, inserție, început - diverse efecte de cadru 3D
      • moștenire - se aplică valoarea elementului părinte
    • border-color - culoarea chenarului. Poate fi setat folosind un nume de culoare specific sau în format RGB (vezi numele culorilor html pentru site)
    Notă

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

    2. Exemple cu diferite chenaruri CSS

    2.1. Exemplu. Diferite stiluri de decorare a chenarelor în 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 "