Piiride loomine CSS -is. Piiriomand

Üks CSS3 box-shadow atribuudi lõbusaid rakendusi on topeltpiiri loomine elemendi ümber. Väga huvitav efekt lehe kaunistamiseks, kuid see töötab ainult uuemate brauserite versioonides, mis toetavad kasti-varju.

Selle efekti loomiseks on aga veel mitmeid meetodeid. Pealegi on taustpildi ilmselge kasutamine ideaalist väga kaugel.

See õpetus tutvustab viit meetodit kahekordse piiri loomiseks elemendi ümber. Ja ainult üks neist nõuab pilti, samas kui kõik teised kasutavad puhast CSS -koodi, millel on brauserites suurepärane tugi.

1. meetod: piir ja piirjooned

See meetod töötab ainult brauserites, mis toetavad kontuuri atribuuti (kõik, välja arvatud IE6 / 7). Lisate elemendile nii äärise kui ka kontuuri atribuudid.

Üks (ääris: kindel 6px #fff; kontuur: kindel 6px # 888;)

Selle meetodi toimimise põhjus on see, et kontuurraam joonistub alati ristküliku välisküljele. Kontuuri omaduse probleem ilmneb ujuvate elementide kasutamisel, kuna ääris kattub külgnevate elementidega.

2. meetod: pseudoelement

See meetod nõuab raami absoluutset positsioneerimist:

Kaks (ääris: kindel 6px #fff; positsioon: suhteline; z -indeks: 1;). Kaks: enne (sisu: ""; kuva: plokk; positsioon: absoluutne; ülaosa: -12 pikslit; vasak: -12 pikslit; ääris: tahke 6px # 888; laius: 312px; polster-põhi: 12px; min-kõrgus: 100%; z-indeks: 10;)

Põhipunktid on z-indeksi atribuudi seadistamine (nii et pseudoelement kattub sisuga), positsioneerimine ja min-kõrguse väärtus. Viimane omadus säilitab raami elastsuse.

3. meetod: vari

Parim meetod, kuna see nõuab ainult ühte koodirida koos kasti-varju atribuutide sätetega.

Kolm (kast-vari: 0 0 0 6px #fff, 0 0 0 12px # 888;)

Kahekordse piiri loomiseks kasutatakse kahte varju. Neid eraldatakse komadega. Hägusus on seatud 0. Kuna teine ​​vari kattub esimese varjundiga, on selle laius kaks korda suurem. Peamine on läbipaistmatute värvide kasutamine, mis loob raamide vahele selge piiri.

Nagu kontuuri atribuut, ei mõjuta ka box-shadow külgnevaid elemente ja võib nendega kattuda. Seetõttu on kompositsiooni välimuse kujundamiseks vaja määrata väli.

Loomulikult on box-shadow atribuudi tugi piiratud uuemate brauseritega.

Meetod 4: täiendav div element

See meetod kasutab välist elementi

kahekordse äärise kuvamiseks. Ainus meetod, mis töötab kõikjal:

Neli (ääris: kindel 6 pikslit # 888; taust: #fff; laius: 312 pikslit; min-kõrgus: 312 pikslit;). Neli jaotust (laius: 300 pikslit; min-kõrgus: 300 pikslit; taust: # 222; veeris: 6 pikslit automaatne; ülevool : peidetud;)

Väline element on veidi suurem, tekitades kahekordse piiri illusiooni.

5. meetod: piiripildi omadus

Teine uus tehnika on sageli tähelepanuta jäetud CSS3 piiripildi atribuut:

Viis (äärise laius: 12 pikslit; -webkit-piiri-pilt: url (mitu piiri ).gif) 12 12 12 12 kordus; -moz-piiri-pilt: url (mitu piiri ).gif 12 12 12 12 kordus; border-image: url (mitme piiriga) 12 12 12 12 kordus; / * Opera jaoks * /)

Kas teate mõnda muud meetodit?

Loomulikult on siia kogutud ammu tuntud ja laialdaselt kasutatavad meetodid. Aga võib -olla teate trikki. Jagage oma lugejatega kommentaarides.

Michael 2016-06-11 1 HTML ja CSS 0

Kuidas topeltpiire css -is tehakse?

Tere kõigile. Kas teate, kuidas css -is kahekordistada piiri? Kui ei, lugege palun seda väikest märkust. Asi on selles, et tavalise piiriga seda teha ei saa, tuleb minna teist teed.

Kui määrate piiri atribuudi abil, saate määrata ainult ühe piiri. Kuid väga sageli võib disain vajada mitut kaadrit. Sellisel juhul peaksite kasutama pseudoraami - varju.

Kahekordne äär kasti varjuga

Üldiselt, kui soovite rohkem teavet varju kohta css -is, siis soovitan teil lugeda vastavat teemat. Selles artiklis ei selgita ma atribuudi süntaksit üksikasjalikult, vaid näitan teile lihtsalt trikki, kuidas topeltpiiri luua. Niisiis, loome tavalise ploki, millele määran mõned stiilid. Blokk võib olla mis tahes ja mis tahes sisuga. Minu puhul on see lihtne div, nii et ma ei näita isegi html -koodi. Ja siin on stiilid:

Div (
taust: # E0D8A3;
laius: 180 pikslit;
kõrgus: 110 pikslit;
polster: 12 pikslit;
}

Noh, tüüpiline plokkide disaini näide.
Nüüd loome kahekordse piiri, kasutades mitut varju. Lisan ploki stiilidele järgmise atribuudi:

Kast-vari: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

See näeb välja selline:

Nagu näete, tuli see päris kenasti välja. Box-shadowis on ainult 5 parameetrit. Esimene on varju horisontaalne nihe, teine ​​vertikaalne. Kolmas ja neljas parameeter on udused ja venivad. Nagu näete, ei puutu me esimest kolme üldse. Me ei vaja hägusust, sest vajame teravat varju. Nagu näete, määrasin neljanda parameetri - venitamise. See määrab, kui palju vari on suurem kui element, mille külge see on kinnitatud.

Vaikimisi näeb kõik välja selline - vari on elemendiga sama suur ja asub selgelt selle all. Kui muudate venitust, hakkab vari elemendist kaugemale ulatuma. Nii saate luua piire, täpselt samamoodi nagu piiriomandiga. Noh, viienda parameetriga arvan, et kõik on selge - see on varju värv.

Nagu näete, loetlesin lihtsalt iga uue varju parameetrid, eraldades need komadega. Ma arvan, et te juba arvasite, et saate samamoodi luua kolmekordse piiri jne. Siin ei ole piiranguid. Tegelikult on minu jaoks küsimus suletud, kuid kui teil on küsimusi, võite need kommentaaridesse kirjutada.

Hetk teie tähelepanu: Me kõik tahame oma saite hostida usaldusväärsel hostil. Olen analüüsinud sadu majutusi ja leidnud parima - HostIQ Internetis on tema kohta sadu positiivseid arvustusi, keskmine kasutajate hinnang on 4,8 viiest. Olgu teie saidid õnnelikud.

Raame saab kasutada mitmel viisil, näiteks dekoratiivse elemendina või kahe objekti eraldamiseks. CSS pakub lugematuid võimalusi kaadrite kasutamiseks.

Raami paksus

Äärise paksus määratakse piirjoone laiuse omaduse järgi, mis võib olla õhuke, keskmine ja paks või numbriline väärtus pikslites. Joonis näitab seda süsteemi:

Raami värv

Äärise värvi omadus määrab äärise värvi. Väärtused on tavalised värviväärtused, näiteks "# 123456", "rgb (123,123,123)" või "kollane".

Raami tüübid

Raame on erinevat tüüpi. Allpool on toodud kaheksa kaadritüüpi ja nende tõlgendus Internet Explorer 5.5 -s. Kõik näited on näidatud värviga "kuldne" ja paksusega "paks", kuid neid saab loomulikult kuvada erineva värvi ja paksusega.

Väärtusi puudub või peidetud saab kasutada, kui te ei soovi äärist kuvada.

Raamide määratlemise näited

Eespool käsitletud kolme omadust saab igas elemendis kombineerida ja vastavalt sellele määrata erinevad raamid. Illustreerimiseks vaadake dokumenti, mis määratleb erinevad raamistikud

,

,
    ja

    Tulemus ei pruugi olla nii muljetavaldav, kuid see näitab mõningaid võimalusi:

    H1 (äärise laius: paks; ääris-stiil: punktiir; äärisevärv: kuldne;) h2 (äärise laius: 20 pikslit; äärise-stiil: algus; äärisevärv: punane;) p (äärise laius: 1 tk;) äärise stiil: katkendlik; äärisevärv: sinine;) ul (äärise laius: õhuke; äärise stiil: tahke; äärisevärv: oranž;)

    Samuti saate määrata kohandatud atribuudid raami ülemisele, alumisele, paremale ja vasakule servale. Seda tehakse järgmiselt.

    H1 (äärise ülaosa laius: paks; äärise ülaosa stiil: tahke; äärise ülaosa värv: punane; äärise alumine laius: paks; äärise alumine stiil: kindel; äärise alumine värv: sinine; ääris-parem-laius: paks; ääris-parem-stiil: tahke; ääris-parem-värv: roheline; ääris-vasak-laius: paks; ääris-vasak-stiil: kindel; ääris-vasak-värv: oranž;)

    Lühendatud märge

    Nagu paljude teiste atribuutide puhul, saate sõna atribuudi abil kombineerida mitu atribuuti üheks. Näide:

    P (äärise laius: 1 pikslit; äärise stiil: tahke; äärise värv: sinine;)

    saab kombineerida järgmisteks:

    P (ääris: 1 pikslit sinine;)

    Kokkuvõte

    Selles õpetuses õppisite tundma CSS -i piiramatuid võimalusi raamide kasutamisel.

    Järgmises õppetükis vaatame, kuidas kastimudelis mõõtmeid määratleda - kõrgus ja laius.

    Kinnisvara CSS – « piir», Võimaldab määrata elemendi ümber oleva perimeetri joone paksuse, värvi ja tüübi. Selle atribuudi parameetrid saab kirjutada ühele reale, eraldades need tühikutega ja suvalises järjekorras.

    • - joone laius üks piksel
    • - pidev joon
    • - Valge värv
    • - must värv
    • - halli värvi

    Tahke elemendi ääris

    Katkendliku elemendi piir

    Täpiline elemendi äär

    Elemendipiir topeltjoonega

    Üksikute piirilõikude omand

    Reljeefne gofreeritud raam mahu järgi

    Kumer laineline raam mahu järgi

    Mahuline surutud raam

    Mahuline kumer raam

    Õpetused / CSS /

    Õppetund 7. Raamige CSS -element

    Peaaegu iga sait kasutab atribuuti, mis loob elemendi ümber piiri. Seda on vaja kas nuppude või tekstiga plokkide jaoks. Äärise loomiseks on CSS -i elemendil kaks omadust: ääris ja kontuur. Mõelgem neile.

    piir

    See atribuut on vajalik elemendi ümber piiri määramiseks, näitab selle piiri veebidokumendis, elemendi paigutamisel võetakse arvesse äärise laiust. Sellel on 3 väärtust- värv, paksus ja raami tüüp.

    Piiriomaduse süntaks on järgmine:

    ääris: laius tüüp värv;
    Saate valida atribuutide väärtuste määramise teistsuguse järjekorra, kuid peamine on tühik.

    Raami paksus (laius) tuleb määrata pikslites (px) või protsentides (%).
    Värvi saab määrata kas RGB (punane roheline sinine) vormingus või HTML HEX -koodina.

    Allpool on Liinitüübid nende nimedega:

    Kuidas määrata elemendile piirid? Me teeme järgmist.

    #block (
    ääris: 3 tk tahke # 0085cc; / * määrake 3 pikslit sinist joont * /
    }

    Kui soovite installida üks-kaks-kolm raamid teatud küljelt, siis tähistame seda järgmiselt:

    piir-top- raam peal;
    piir-alt- raam allosas;
    piir-vasak- raam vasakul;
    piir-parem- raam paremal;

    Blokeeri (
    ääris-parem: 3 pikslit tahke # 0085cc;
    ääris-põhi: 2 pikslit katkendlik # 0085cc;
    }

    Kui sa tahad raamid eemaldada element CSS -is, seejärel kirjutage atribuudi piirile - pole

    Tühi (
    piir: puudub; / * elemendil, mille klass on tühi, pole äärist * /
    }

    kontuur

    Kontuur on omadus, mida vajate elemendi välispiiri määramiseks.

    Seal on kaks erinevust piirist:
    Esiteks, kontuuris antud joon EI mõjuta kasti enda positsiooni, laiust ja kõrgust.
    Teiseks puudub võimalus raami paigaldamiseks teatud küljelt.
    Süntaks on sama mis ääris.

    kontuur: 2 pikslit punktiir # 0085cc; / * 2 pikslit punktiir sinine äär * /
    Kontuuri ja ka äärise jaoks saate äärised eemaldada, tippides ükski:

    Tänan tähelepanu eest!

    Eelmine artikkel
    Õppetund 6.

    Elemendi piirid.

    Täidis ja veerised CSS -is. Mis on varu ja polster? Järgmine artikkel
    Õppetund 8. Kuidas määrata CSS -is elemendi teksti värvi ja tausta?

    Artikli kommentaarid (vk.com)

    piir

    Brauseri tugi

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

    Kirjeldus

    Atribuut CSS võimaldab teil samaaegselt määrata ploki piiri laiuse, stiili ja värvi. Ploki piir on tavaline joon / raam, mis ümbritseb plokki igast küljest. Tuleb meeles pidada, et äärise lisamisel mõjutab see ploki üldist suurust.

    Väärtused eraldatakse tühikuga ja need võivad olla suvalises järjekorras, brauser otsustab, milline neist vastab nõutavale parameetrile. Kõik kolm väärtust on valikulised, laiuse ja / või värvi võib välja jätta, sellisel juhul kasutatakse puuduva väärtuse asemel vaikimisi atribuudile määratud väärtust, s.t. kui näiteks laiust pole määratud, kasutatakse atribuudi vaikeväärtust. Süntaksi all olev tabel sisaldab väärtusi, milliseid atribuute saate kasutada.

    Märkus. Piiride määramiseks ainult elemendi teatud külgedele kasutage järgmisi atribuute: ääris-ülaosa, piir-alumine, äär-vasak, piir-parem.

    Näpunäide. Üldiselt peate äärise kasutamisel lisama polstrit.

    CSS -i atribuut: piir

    Need lisavad tühiku raami ja selle sisu vahele: tekst, pildid või alammärgendid. Tavaliselt kuvatakse ääris elemendi sisu lähedal, see on kasulik ainult siis, kui peate pildi ümber piiri seadma.

    Süntaks

    ääris: äärise laiuse äärise stiilis äärisevärv | pärima;

    Kinnisvara väärtused

    Näide

    Näide

    Siin on natuke teksti.

    Selle näite tulemus brauseriaknas:

    Kuidas määrata kastides äärise värvi, stiili ja suurust.

    Märgistuskeeltes on ääris ( piir), on ainult lauad, pildid ja raamid, mõnel juhul on võimalik määrata äärise värv ja ongi kõik.

    Border atribuut

    Kaskaadiga stiililehed annavad meile rohkem võimalusi, kuid kõigepealt.

    CSS -is saame piiri laiust juhtida piiri laius või täpsemalt öeldes saame iga külje paksust eraldi kontrollida:
    border-top-width- ülemise piiri paksus
    border-right-width- parema piiri paksus
    äär-alumine-laius- alumise piiri paksus
    piir-vasak-laius- vasak äärise paksus
    Kuid võib olla ka lühendatud vorm:
    P (äärise laius: üleval paremal all vasakul;)(üleval paremal all vasakul).
    Ääre laiust saab määrata:
    arvud DIV (äärise laius: 5 pikslit), nullist lõpmatuseni, s.t. positiivne.
    õhuke- õhuke ääris, DIV (äärise laius: õhuke)
    keskmine- keskmine äär, DIV (äärise laius: keskmine)
    paks- paks ääris, DIV (äärise laius: paks)
    Numbritega on see selge, kuid nende väärtustega sõltub kõik brauserist, kuid siiski õhuke<= medium <= thick .

    Samuti saame äärise värvi juhtida äärisevärv või täpsemalt mõlema külje värviga:
    ääris-top-värvülemise äärise värv;
    ääris-parem-värväärise parem värv;
    ääris-alt-värv alumise äärise värv;
    ääris-vasak-värväärise värv vasakul küljel.
    Värvi väärtus on seatud nagu värvi, st. üks 16 värvist: aqua, must, sinine, fuksia, hall, roheline, lubi, punakaspruun, tumesinine, oliiv, lilla, punane, hõbe, sinakasroheline, valge või kollane, saab määrata ka värve: värv: # 000000, värv: # AF0 , värv: rgb (255,0,0) või värv: rgb (100%, 0%, 0%).
    Ükskõik, millise värviskeemi valite, tõlgivad brauserid selle ikkagi värv: rgb (255,0,0)... Näiteks värv: lubi = värv: # 00ff00 = värv: # 0F0 = värv: rgb (0%, 100%, 0%), kuid brauseri jaoks pole see oluline värv: rgb (0,255,0), st. see arvutab selle väärtuse.

    Kui äärise paksust ja värvi saab HTML -iga juhtida, siis stiil ( piiri stiilis) Ainult CSS !!!
    Stiili saab mõlemalt poolt eraldi juhtida:
    border-top-stiilisülemise piiri stiil;
    piiri-parem stiilis parema äärise stiil;
    border-bottom-stiilis alumise piiri stiil;
    ääris-vasak-stiilis piiri stiil vasakul küljel.
    Vaatame nüüd stiiliväärtusi:
    1)piiri stiilis: pole- See on vaikimisi, sarnaselt äärise laiusega: 0.
    2)piiri stiil: peidetud- Sama, välja arvatud tabelid, mida me hiljem vaatame.
    3)ääris-stiil: punktiir- punktiirjoon.
    4)ääris-stiil: katkendlik- Punktiirjoon.
    5)ääris-stiil: kindel- Pidev joon, st. nagu HTML -is.
    6)ääris-stiil: kahekordne- Kahekordne täisjoonega ääris, siin on vaja vähemalt 3 pikslit äärist.
    7)ääris-stiil: soon- Piir näeb välja nagu oleks lõuendisse lõigatud.
    8)ääris-stiil: ridge- Piir näeb välja nagu lõuendilt väljaulatuv.
    9)ääris-stiil: sisestatud- Kogu kast näeb välja nagu oleks lõuendisse surutud.
    10)piiri stiilis: algusest peale- Vastupidine eelmisele.
    Mõni brauser võib väärtusi ignoreerida: punktiir, kriips, kahekordne, soon, harja, sisse ja välja ning väljastada need tahketena, s.t. tavaline piir.

    Loomulikult on see nii, kuid kõik ülaltoodud näited on ainult toimimispõhimõte, mitte mehhanism.
    Reegli omadus piir tähendab (ääris: suuruse stiili värv;), see reegel täidetakse, kui kõik kolm väärtust on olemas ja näiteks ainult sellises järjekorras H1 (ääris: 5 pikslit topeltpunane;), kuid võib esineda erandeid, kui need väärtused esitatakse märgistuskeelte abil, näiteks tabeli jaoks TABEL (ääris: 2 pikslit), st. on määratud ainult üks väärtus.

    Selleks, et hallata mitte kogu äärekivi, vaid iga osa eraldi, kehtivad reeglid:
    (ääris-ülaosa: suuruse stiilis värv;)Ülemise äärekivi juhtimine;
    (paremal ääris: suuruse stiilis värv;) Ohjeldada juhtimist paremal;
    (ääris-alt: suuruse stiilis värv;) Alumine äärekivi juhtimine;
    (ääris-vasak: suuruse stiilis värv;) Ohjeldamine vasakul.
    Neid reegleid saab kasutada eraldi või kõiki koos.

    Erandiks on see reegel:
    H1 (
    ääris: 4 pikslit roheline;
    }

    Asi on selles, et CSS-is on viimane reegel kõrgeimal prioriteedil, sel juhul sisaldab piiriatribuut piiri-vasak ja seetõttu eiratakse vasak-piiri reeglit, paremal viisil:
    H1 (
    ääris: 4 pikslit roheline;
    ääris-vasak: 2 pikslit topeltpunane;
    }

    Algusest peale seadsime reeglid kogu äärekivile ja seejärel üksikutele aladele.

    Elementide piiridel on mul kõik, välja arvatud see, et tabelite ja muude erandite puhul kaalume mõningaid omadusi.

    CSS: piir. Elemendi piirid.

    CSS3 piirid

    CSS3 piirid

    CSS3 abil saate luua ümaraid ääriseid, lisada konteineritele varje ja kasutada pilti äärisena - ilma kujundusprogrammi, näiteks Photoshopi kasutamata.

    Selles õpetuses saate teada järgmistest äärisomadustest:

    • piiri raadius
    • kast-vari
    • piir-pilt

    Brauseri tugi

    Kinnisvara Brauseri tugi
    piiri raadius
    kast-vari
    piir-pilt

    Internet Explorer 9 toetab mõnda uut äärisomadust.

    Firefox nõuab piiri-pildi jaoks eesliidet -moz-.

    Chrome ja Safari vajavad äärise-pildi jaoks eesliidet -webkit-.

    Opera nõuab piiri-pildi jaoks eesliidet -o-.

    Safari nõuab kast-varju jaoks ka eesliidet -webkit-.

    Opera toetab uusi piiriomadusi.

    CSS3 ümardatud nurgad

    Ümardatud nurkade lisamine CSS2 -le oli keeruline. Iga nurga jaoks pidime kasutama erinevaid pilte.

    CSS3 -s on ümarate nurkade loomine lihtne.

    CSS3-s kasutatakse piiri-raadiuse omadust ümardatud nurkade loomiseks:

    Sellel plokil on ümarad nurgad!

    CSS3 Box Shadow

    CSS3-s kasutatakse atribuuti box-shadow varjude lisamiseks konteineritele:

    CSS3 piiripilt

    Atribuudiga CSS3 border-image saate äärise loomiseks kasutada pilti.

    Atribuut border-image võimaldab määrata piiri-pildi!

    Äärise loomiseks kasutatud algne pilt on teie:

    Uued piiriomadused

    Border atribuut

    Border atribuut, silt

    , kasutatakse laua ümber oleva äärise paksuse määramiseks.

    HTML -i piirid

    Äärise kasutamine ilma väärtusteta on lubatud, siis on äärise paksus võrdne ühe piksliga. Vaikimisi kuvatakse raam 3D -efektidega, kuid kui lisaks rakendate taustaatribuuti, muutub raam tasaseks.

    Lisaks, kui atribuut border on nullist erinev, näitavad brauserid ka õhukesi ääriseid lahtrite enda ümber. Nende piiride kuvamist saab juhtida reeglite atribuudi abil.

    Väärtused

    Atribuudi väärtus võib olla mistahes negatiivne arv, mis määrab suuruse pikslites.

    Vaikeväärtus: 0.

    Süntaks

    Nõutav atribuut: puudub.

    HTML -näide: piiriatribuudi rakendamine

    Näite tulemus

    Tulemus. Äärise atribuudi rakendamine.

    CSS -i piirivara varjunimed, et luua objekti piir, nimelt äärise paksus, selle värv ja stiil. Seda atribuuti kasutatakse HTML -is laialdaselt. Lehe sisu paremaks tajumiseks saate luua erinevaid efekte. Näiteks kujundage külgriba, saidi päis, menüü jne.

    1. CSS -i piiri süntaks

    piir: piiri laius äärise stiilis äärisevärv | pärida;
    • border -width - piiri paksus. Saate selle määrata pikslites (px) või kasutada standardväärtusi õhuke, keskmine, paks (need erinevad ainult pikslite laiuse poolest)
    • border -style - renderdatud piiri stiil. Võib võtta järgmisi väärtusi
      • puudub või on peidetud - tühistab piiri
      • punktiir - punktiirraam
      • katkendlik - kriipsraam
      • kindel - lihtne joon (kasutatakse kõige sagedamini)
      • topelt - topeltpiir
      • soon - 3D soonega ääris
      • ridge, inset, outset - mitmesugused 3D -raami efektid
      • pärida - rakendatakse emaelemendi väärtus
    • border -color - äärise värv. Saab määrata konkreetse värvinime või RGB -vormingus (vt saidi html -värvide nimesid)
    Märge

    CSS -i piiriatribuudi väärtusi saab määrata suvalises järjekorras. Kõige sagedamini kasutatav järjestus on "paksuse stiilis värv".

    2. Näited erinevate CSS -i piiridega

    2.1. Näide. Piiri stiilis piiride kaunistamise erinevad stiilid

    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 "