Kreiranje granica u CSS -u. Granično vlasništvo

Jedna od zabavnih aplikacija svojstva box-shadow CSS3 je stvaranje dvostruke ivice oko elementa. Vrlo zanimljiv efekt za ukrašavanje stranice, ali funkcionirat će samo u novijim verzijama preglednika koji podržavaju okvir-sjenu.

Međutim, postoji nekoliko drugih metoda za stvaranje ovog učinka. Štaviše, očigledna upotreba pozadinske slike je daleko od idealne.

Ovaj vodič predstavlja pet metoda za stvaranje dvostruke ivice oko elementa. I samo jedan od njih zahtijeva sliku, dok svi ostali koriste čisti CSS kod s odličnom podrškom u preglednicima.

Metoda 1: granica i obris

Ova metoda radi samo u preglednicima koji podržavaju svojstvo outline (svi osim IE6 / 7). Elementu dodajete i granice i svojstva obrisa.

One (border: solid 6px #fff; outline: solid 6px # 888;)

Razlog zašto ova metoda funkcionira je taj što okvir okvira uvijek crta s vanjske strane pravokutnika. Problem sa svojstvom obrisa javlja se kada se koriste plutajući elementi, jer se ivica preklapa sa susjednim elementima.

Metoda 2: pseudo element

Ova metoda zahtijeva apsolutno pozicioniranje okvira:

Dva (obrub: čvrsti 6px #fff; položaj: relativan; z -indeks: 1;) .dva: prije (sadržaj: ""; prikaz: blok; položaj: apsolutni; vrh: -12px; lijevo: -12px; ivica: solid 6px # 888; width: 312px; padding-bottom: 12px; min-height: 100%; z-index: 10;)

Ključne točke su postavljanje svojstva z-indeksa (tako da pseudo element preklapa sadržaj), pozicioniranje i vrijednost min-visine. Ovo posljednje svojstvo čuva elastičnost okvira.

Metoda 3: sjena

Najbolji način jer zahtijeva samo jedan red koda s postavkama svojstva box-shadow.

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

Za stvaranje dvostruke ivice koriste se dvije sjene. Odvojeni su zarezima. Zamućenje je postavljeno na 0. Budući da se druga sjena preklapa s prvom, ima dvostruku širinu. Ključna tačka je upotreba neprozirnih boja, što stvara jasnu granicu između okvira.

Kao i svojstvo obrisa, okvir-sjena ne utječe na susjedne elemente i može ih preklapati. Stoga je potrebno postaviti polje koje će oblikovati izgled kompozicije.

Naravno, podrška za svojstvo box-shadow ograničena je na novije preglednike.

Metoda 4: dodatni div element

Ova metoda koristi vanjski element

za prikaz dvostruke ivice. Jedina metoda koja djeluje posvuda:

Četiri (obrub: čvrsti 6px # 888; pozadina: #fff; širina: 312px; min-visina: 312px;). Četiri div (širina: 300px; min-visina: 300px; pozadina: # 222; margina: 6px auto; preljev : skriveno;)

Vanjski element je nešto veći, što daje iluziju dvostruke ivice.

Metoda 5: svojstvo border-image

Još jedna nova tehnika je često zanemareno svojstvo slike granice slike:

Pet (border-width: 12px; -webkit-border-image: url (multiple-border.gif) 12 12 12 12 ponavljanje; -moz-border-image: url (multi-border.gif) 12 12 12 12 ponavljanje; border-image: url (više granica) 12 12 12 12 ponavljanje; / * za Opera * /)

Znate li drugu metodu?

Naravno, ovdje su sakupljene dugo poznate i široko korištene metode. Ali možda znate trik. Podijelite sa svojim čitateljima u komentarima.

Michael 2016-06-11 1 HTML i CSS 0

Kako se dvostruka ivica vrši u css -u?

Zdravo svima. Znate li kako duplicirati granice u css -u? Ako nije, pročitajte ovu malu bilješku. Poanta je u tome da to ne možete učiniti redovnom granicom, morate ići drugim putem.

Ako granicu navedete pomoću svojstva border, možete navesti samo jednu. Ali vrlo često dizajn može zahtijevati više okvira. U ovom slučaju, trebali biste koristiti pseudo -okvir - sjenu.

Dvostruka ivica sa okvirnom sjenom

Općenito, ako želite detaljnije proučiti sjenu u css -u, savjetujem vam da pročitate odgovarajuću temu. U ovom članku neću detaljno objašnjavati sintaksu svojstva, već ću vam jednostavno pokazati trik kako stvoriti dvostruku granicu. Dakle, napravimo običan blok kojem ću dodijeliti neke stilove. Blok može biti bilo koji i sa bilo kojim sadržajem. U mom slučaju, to je jednostavan div, pa neću ni prikazati html kôd. A evo i stilova:

Div (
pozadina: # E0D8A3;
širina: 180px;
visina: 110px;
padding: 12px;
}

Pa, tipičan primjer dizajna blokova.
Sada napravimo dvostruku granicu pomoću više sjenki. Stilovima blokova dodaću sljedeće svojstvo:

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

Ovako to izgleda:

Kao što vidite, ispalo je prilično lijepo. U okvir-sjeni postoji samo 5 parametara. Prvi je vodoravno pomicanje sjene, drugi je okomiti. Treći i četvrti parametar su zamućenje i rastezanje. Kao što vidite, prve tri uopće ne diramo. Ne treba nam zamućenje jer želimo oštru sjenu. Kao što vidite, propisao sam četvrti parametar - istezanje. Određuje koliko će sjena biti veća od elementa na koji je pričvršćen.

Prema zadanim postavkama, sve izgleda ovako - sjena je iste veličine kao i element i jasno se nalazi ispod nje. Ako promijenite rastezanje, tada sjena počinje izlaziti izvan elementa. Ovako možete stvoriti granice, potpuno iste kao i sa svojstvom border. Pa, s petim parametrom, mislim da je sve jasno - ovo je boja sjene.

Kao što vidite, upravo sam naveo parametre za svaku novu sjenu, odvojene zarezima. Mislim da ste već pogodili da na isti način možete stvoriti trostruku granicu itd. Ovdje nema ograničenja. Zapravo, što se mene tiče, pitanje je zatvoreno, ali ako imate bilo kakvih pitanja, možete ih napisati u komentarima.

Samo trenutak vaše pažnje: Svi želimo ugostiti naše web stranice na pouzdanom hostingu. Analizirao sam stotine hostinga i pronašao najbolje - HostIQ Na stotine pozitivnih recenzija o njemu na internetu, prosječna ocjena korisnika je 4,8 od 5. Neka vaše web stranice budu sretne.

Okviri se mogu koristiti na mnogo načina, na primjer kao ukrasni element ili za odvajanje dva predmeta. CSS pruža bezbroj mogućnosti za korištenje okvira.

Debljina okvira

Debljina obruba određena je svojstvom border-width, koje može biti tanko, srednje i debelo, ili numeričkom vrijednošću u pikselima. Na slici je prikazan ovaj sistem:

Boja okvira

Svojstvo border-color definira boju obruba. Vrijednosti su normalne vrijednosti boje kao što su "# 123456", "rgb (123,123,123)" ili "žuto".

Vrste okvira

Postoje različite vrste okvira. Dole je prikazano osam tipova okvira i njihova interpretacija u Internet Exploreru 5.5. Svi primjeri prikazani su bojom "zlatna" i debljinom "debela", ali se, naravno, mogu prikazati u drugoj boji i debljini.

Vrijednosti none ili hidden mogu se koristiti ako ne želite prikazati obrub.

Primjeri definiranja okvira

Tri gore opisana svojstva mogu se kombinirati u svakom elementu i, shodno tome, postaviti različite okvire. Za ilustraciju, pogledajte dokument koji definira različite okvire za

,

,
    i

    Rezultat možda nije tako impresivan, ali pokazuje neke mogućnosti:

    H1 (širina obruba: debela; stil obruba: isprekidan; boja ivice: zlatna;) h2 (širina ivice: 20px; stil ivice: početak; granica granice: crvena;) p (širina ivice: 1px; obrubljeni stil: isprekidani; boja ivice: plava;) ul (širina ivice: tanka; stil obruba: čvrsta; boja ivice: narandžasta;)

    Također možete postaviti prilagođena svojstva za gornju, donju, desnu i lijevu ivicu okvira. Evo kako to učiniti:

    H1 (širina obruba na vrhu: debela; stil vrha ivice: čvrsta; boja vrha ivice: crvena; širina ruba na dnu: debela; stil dna ivice: čvrsta; boja dna ivice: plava; ivica-desna-širina: debela; granična-desna-stil: čvrsta; granična-desna-boja: zelena; ivica-lijeva-širina: debela; granična-lijeva-stil: čvrsta; ivica-lijeva-boja: narančasta;)

    Skraćeni zapis

    Kao i kod mnogih drugih svojstava, možete kombinirati više svojstava u jedno pomoću ivice riječi. Primjer:

    P (širina ivice: 1px; stil ivice: čvrsta; boja ivice: plava;)

    mogu se kombinovati u:

    P (obrub: 1px puna plava;)

    Sažetak

    U ovom vodiču ste naučili o neograničenim mogućnostima CSS -a pri korištenju okvira.

    U sljedećoj lekciji ćemo pogledati kako definirati dimenzije u modelu kutije - visinu i širinu.

    Property CSS – « granica», Omogućuje postavljanje debljine, boje i vrste obodne linije oko elementa. Parametri ovog svojstva mogu se zapisati u jedan red, odvojeni razmacima i bilo kojim redoslijedom.

    • - širina linije jedan piksel
    • - puna linija
    • - Bijela boja
    • - crna boja
    • - siva boja

    Granica punog elementa

    Iscrtana ivica elementa

    Ivičasta ivica elementa

    Granica elementa s dvostrukom linijom

    Imovina pojedinih dijelova granice

    Reljefni valoviti okvir u volumenu

    Konveksni valoviti okvir u volumenu

    Volumetrijski ulegnuti okvir

    Volumetrijski konveksni okvir

    Vodiči / CSS /

    Lekcija 7. Uokvirite CSS element

    Gotovo svaka web lokacija koristi svojstvo koje stvara obrub oko elementa. Potreban je ili za dugmad ili za blokove s tekstom. Da biste stvorili obrub, element u CSS -u ima dva svojstva: obrub i obris. Razmotrimo ih.

    granica

    Ovo svojstvo je potrebno za postavljanje ivice oko elementa, označava njegovu granicu u web dokumentu, širina ivice se uzima u obzir pri pozicioniranju elementa. Ima 3 vrijednosti- boju, debljinu i vrstu okvira.

    Sintaksa za granično svojstvo je sljedeća:

    obrub: Širina Tip Boja;
    Možete odabrati drugačiji redoslijed navođenja vrijednosti svojstava, ali glavna stvar je kroz razmak.

    Debljina (širina) okvira mora biti navedena u pikselima (px) ili postotku (%).
    Boja se može navesti ili u RGB (crveno zelena plava) formatu ili u HTML HEX kodu.

    Ispod se nalaze VRSTE LINIJE sa njihovim imenima:

    Kako postaviti granice na elementu? Radimo kako slijedi:

    #block (
    bordura: 3px solid # 0085cc; / * postavite 3px plavu liniju * ​​/
    }

    Ako želite instalirati jedan-dva-tri okvire sa određene strane, onda to označavamo ovako:

    border-top- okvir na vrhu;
    granica-dno- okvir pri dnu;
    granica-lijevo- okvir s lijeve strane;
    granica-desno- okvir sa desne strane;

    Blokiraj (
    granica desno: 3px solid # 0085cc;
    border-bottom: 2px isprekidano # 0085cc;
    }

    Ako želiš uklonite okvire element u CSS -u, zatim upišite u granicu svojstva - nema

    Prazno (
    granica: nema; / * element s praznom klasom neće imati obrub * /
    }

    obris

    Outline je svojstvo koje vam je potrebno za postavljanje vanjske ivice elementa.

    Tu je dve razlike u odnosu na granicu:
    Prvo, linija navedena u nacrtu NEĆE utjecati na položaj same kutije, njenu širinu i visinu.
    Drugo, ne postoji mogućnost ugradnje okvira s određene strane.
    Sintaksa je ista kao border.

    kontura: 2px tačkasto # 0085cc; / * 2 piksela isprekidana plava ivica * /
    Za okvir, kao i za obrub, možete ukloniti granice tako da ne upišete ništa:

    Hvala na pažnji!

    Prethodni članak
    Lekcija 6.

    Granice elementa.

    Podstavci i margine u CSS -u. Šta su margina i padding? Sledeći članak
    Lekcija 8. Kako postaviti boju teksta i pozadinu elementa u CSS -u?

    Komentari na članak (vk.com)

    granica

    Podrška za preglednike

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

    Opis

    CSS svojstvo vam omogućuje da istovremeno postavite širinu, stil i boju za rub bloka. Granica bloka je pravilna linija / okvir koji okružuje blok sa svih strana. Treba imati na umu da će dodavanje obruba utjecati na ukupnu veličinu bloka.

    Vrijednosti su odvojene razmakom i mogu biti bilo kojim redoslijedom, preglednik će odrediti koji odgovara traženom parametru. Sve tri vrijednosti su izborne, širina i / ili boja mogu se izostaviti, u tom slučaju će se umjesto vrijednosti koja nedostaje koristiti vrijednost postavljena za zadano svojstvo, tj. ako, na primjer, nije navedena širina, tada će se koristiti zadana vrijednost svojstva. Tablica ispod sintakse sadrži vrijednosti kojih svojstava možete koristiti.

    Napomena: Da biste postavili granice samo na određene strane elementa, upotrijebite sljedeća svojstva: rub-vrh, rub-dno, rub-lijevo, rub-desno.

    Savjet: Općenito, kada koristite obrub, morate dodati padding.

    CSS svojstvo: granica

    Oni dodaju razmak između okvira bloka i njegovog sadržaja: tekst, slike ili podređene oznake. Obično se ivica prikazuje blizu sadržaja elementa, to je korisno samo ako trebate postaviti okvir oko slike.

    Sintaksa

    border: border-width-border-color | naslediti;

    Vrednosti imovine

    Primjer

    Primjer

    Ovde se nalazi neki tekst.

    Rezultat ovog primjera u prozoru preglednika:

    Kako postaviti boju, stil i veličinu obruba u okvire.

    U jezicima za označavanje, rubnjak ( granica), imaju samo tablice, slike i okvire, u nekim je slučajevima moguće postaviti boju obruba i to je to.

    Atribut granice

    Kaskadni stilski listovi pružaju nam više mogućnosti, ali prvo prvo.

    U CSS -u možemo kontrolirati širinu ivice s border-width, ili da budemo precizniji, možemo kontrolirati debljinu svake strane zasebno:
    ivica-gornja širina- debljina gornje ivice
    border-right-width- debljina desne ivice
    border-bottom-width- debljina donje ivice
    border-left-width- debljina lijevog ruba
    Ali može postojati i stenografski oblik:
    P (širina ivice: gore desno dolje lijevo;)(gore desno dolje lijevo).
    Širina ivičnjaka se može podesiti:
    figure DIV (širina ivice: 5px), od nule do beskonačnosti, tj. pozitivno.
    tanak- tanka ivica, DIV (širina ivice: tanka)
    srednji- srednja ivica, DIV (širina ivice: srednja)
    debeo- debela bordura, DIV (širina ivice: debela)
    S brojevima je jasno, ali s ovim vrijednostima sve ovisi o pregledniku, ali ipak tanak<= medium <= thick .

    Također možemo kontrolirati boju granice s bordura ili točnije sa bojom svake strane:
    boja obruba na vrhu boja gornje ivice;
    granična-desna-boja boja desne ivice;
    boja ivice-dna boja donje ivice;
    bordura-lijeva-boja boju obruba s lijeve strane.
    Vrijednost boje postavljena je kao za boja, tj. jedna od 16 boja: aqua, crna, plava, fuksija, siva, zelena, limeta, kestenjasta, mornarica, maslina, ljubičasta, crvena, srebrna, tamnocrvena, bijela ili žuta, takođe se mogu postaviti boje: boja: # 000000, boja: # AF0 , boja: rgb (255,0,0) ili boja: rgb (100%, 0%, 0%).
    Bez obzira koju shemu boja odabrali, preglednici će je ipak prevesti boja: rgb (255,0,0)... Na primjer boja: kreč = boja: # 00ff00 = boja: # 0F0 = boja: rgb (0%, 100%, 0%), ali za pretraživač to nije važno boja: rgb (0,255,0), tj. izračunat će ovu vrijednost.

    Ako se debljina i boja obruba mogu kontrolirati pomoću HTML -a, tada stil ( granični stil) Samo CSS !!!
    Stil se može kontrolirati sa svake strane zasebno:
    rubni-top-stil stil gornje ivice;
    granično-desno stil desne ivice;
    stil dna granice stil donje ivice;
    graničnik-lijevo stil obruba s lijeve strane.
    Pogledajmo sada vrijednosti stila:
    1)obrubljeni stil: nema- Ovo je zadana vrijednost, slično granici širine: 0.
    2)rubni stil: skriveno- Isto, osim tablica koje ćemo pogledati kasnije.
    3)obrubljeni stil: tačkasto- Tačkasta ivica.
    4)rubni stil: isprekidano- Granica isprekidane linije.
    5)obrubljeni stil: čvrst- Granica pune linije, tj. kao u HTML -u.
    6)obrubljeni stil: dvostruki- Dvostruka ivica pune linije, ovdje vam je potrebna širina ivice od najmanje 3 piksela.
    7)obrubljeni stil: utor- Granica izgleda kao da je urezana u platno.
    8)rubni stil: greben- Granica izgleda kao da viri iz platna.
    9)rubni stil: umetnut- Cijela kutija izgleda kao da je utisnuta u platno.
    10)rubni stil: početak- Nasuprot prethodnom.
    Neki preglednici mogu zanemariti vrijednosti: isprekidane, isprekidane, dvostruke, utor, greben, umetanje i početak i ispisati ih kao čvrste, tj. uobičajenu granicu.

    Naravno, sve je tako, ali svi gornji primjeri samo su princip rada, a ne mehanizam.
    Rule property granica implicira (border: size style color;), ovo pravilo se izvršava ako su prisutne sve tri vrijednosti i samo ovim redoslijedom, na primjer H1 (obrub: 5px dvostruko crveno;), ali mogu postojati izuzeci ako te vrijednosti daju jezici označavanja, na primjer, za tablicu TABELA (obrub: 2 px), tj. navedena je samo jedna vrijednost.

    Da biste upravljali ne cijelim rubnjakom, već svakim dijelom zasebno, postoje pravila:
    (gornji rub: boja u stilu veličine;) Kontrola gornjeg ivičnjaka;
    (s desne strane: veličina stila u boji;) Kontrola ivičnjaka s desne strane;
    (donji rub: boja u stilu stila;) Kontrola donjeg ivičnjaka;
    (obrub-lijevo: boja u stilu veličine;) Kontrola ivičnjaka s lijeve strane.
    Ova pravila se mogu koristiti zasebno ili svi zajedno.

    Izuzetak je ovo pravilo:
    H1 (
    obrub: 4px puna zelena;
    }

    Stvar je u tome što u CSS-u posljednje pravilo ima najveći prioritet, u ovom slučaju granično svojstvo sadrži border-left i stoga će pravilo border-left biti zanemareno, upravo ovako:
    H1 (
    obrub: 4px puna zelena;
    rub-lijevo: 2px dvostruko crveno;
    }

    Od početka smo postavili pravila za cijeli rubnik, a zatim i za pojedina područja.

    Imam sve na granicama za elemente, osim što ćemo uzeti u obzir neka svojstva kada dođemo do tablica i drugih izuzetaka.

    CSS: granica. Granice elementa.

    CSS3 Granice

    CSS3 Granice

    Pomoću CSS3 možete stvoriti zaobljene ivice, dodati sjene u spremnike i koristiti sliku kao obrub - bez korištenja dizajnerskog programa poput Photoshopa.

    U ovom vodiču ćete naučiti o sljedećim svojstvima obruba:

    • granica-radijus
    • box-shadow
    • border-image

    Podrška za preglednike

    Property Podrška za preglednike
    granica-radijus
    box-shadow
    border-image

    Internet Explorer 9 podržava neka od novih svojstava obruba.

    Firefox zahtijeva prefiks -moz- za sliku slike.

    Chrome i Safari zahtijevaju prefiks -webkit- za sliku granice.

    Opera zahtijeva prefiks -o- za sliku granice.

    Safari takođe zahtijeva prefiks -webkit- za box-shadow.

    Opera podržava nova svojstva granica.

    CSS3 zaobljeni uglovi

    Dodavanje zaobljenih uglova u CSS2 bilo je nezgodno. Morali smo koristiti različite slike za svaki ugao.

    U CSS3, stvaranje zaobljenih uglova je jednostavno.

    U CSS3 svojstvo border-radius koristi se za stvaranje zaobljenih uglova:

    Ovaj blok ima zaobljene uglove!

    CSS3 Box Shadow

    U CSS3, svojstvo box-shadow koristi se za dodavanje sjena u spremnike:

    CSS3 Border-Image

    Sa svojstvom CSS3 border-image možete koristiti sliku za kreiranje obruba:

    Svojstvo border-image omogućava vam da navedete border-image!

    Originalna slika korištena za stvaranje obruba je vaša:

    New Border Properties

    Atribut granice

    Atribut granice, tag

    , koristi se za određivanje debljine obruba oko stola.

    HTML ivice

    Dopušteno je koristiti rub bez vrijednosti, tada će debljina obruba biti jednaka jednom pikselu. Prema zadanim postavkama okvir se prikazuje s 3D efektima, ali ako dodatno primijenite atribut pozadine, okvir će postati "ravni".

    Osim toga, ako atribut border nije nula, preglednici također prikazuju tanke granice oko samih ćelija. Prikaz ovih granica može se kontrolirati pomoću atributa rules.

    Vrednosti

    Vrijednost atributa može biti bilo koji negativan broj koji određuje veličinu u pikselima.

    Zadana vrijednost: 0.

    Sintaksa

    Potrebni atribut: Nema.

    HTML primjer: Primjena graničnog atributa

    Primjer rezultata

    Rezultat. Primjena graničnog atributa.

    CSS pseudonimi svojstava granica za stvaranje ivice objekta, naime debljine ivice, njegove boje i stila. Ovo svojstvo se široko koristi u HTML -u. Možete stvoriti različite efekte za bolju percepciju sadržaja na stranici. Na primjer, dizajnirajte bočnu traku, zaglavlje web lokacije, meni itd.

    1. CSS granična sintaksa

    granica: granična širina obruba u boji | nasljediti;
    • border -width - debljina obruba. Možete ga postaviti u pikselima (px) ili koristiti standardne vrijednosti tanke, srednje, debele (razlikuju se samo po širini u pikselima)
    • border -style - stil iscrtane ivice. Može uzeti sljedeće vrijednosti
      • ništa ili skriveno - poništava granicu
      • tačkasti - tačkasti okvir
      • isprekidano - okvir crtice
      • puna - jednostavna linija (najčešće se koristi)
      • double - double border
      • utor - 3D utorni rub
      • greben, umetak, početak - različiti efekti 3D okvira
      • naslediti - primenjuje se vrednost roditeljskog elementa
    • border -color - boja ivice. Može se postaviti pomoću naziva određene boje ili u RGB formatu (pogledajte nazive html boja za web lokaciju)
    Bilješka

    Vrijednosti u svojstvu granice CSS -a mogu se navesti bilo kojim redoslijedom. Najčešće korišteni slijed je "boja debljine stila".

    2. Primjeri sa različitim graničnim granicama CSS -a

    2.1. Primjer. Različiti stilovi graničnika u stilu obruba

    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 "