Kuinka tehdä reunuksesta läpinäkyvä css. Reunustyylinen: reunatyyli. Yksittäisten puolueiden rajat

Vlad Merževitš

KANSSA CSS:n avulla Voit lisätä reunuksen elementtiin useilla tavoilla. Pohjimmiltaan tietysti käytetään border-ominaisuutta, universaalimpänä ominaisuutena, sekä ääriviivaa ja yllättäen box-shadow , jonka päätehtävänä on luoda varjo. Seuraavaksi tarkastelemme näitä menetelmiä ja niiden eroja keskenään.

hahmotella omaisuutta

Yksinkertaisin ominaisuus kehysten luomiseen. Sillä on samat parametrit kuin reunalla, mutta se eroaa huomattavasti joissakin yksityiskohdissa:

• ääriviiva näkyy elementin ympärillä (reuna sisällä);
• ääriviivat eivät vaikuta elementin mittoihin (reunus lisätään elementin leveyteen ja korkeuteen);
• ääriviivat voidaan asettaa vain koko elementin ympärille, mutta ei päälle yksittäisiä puolueita ah (reunaa voidaan käyttää mille tahansa sivulle tai kaikkia kerralla);
• raja-säde-ominaisuuden määrittämä ääriviivan säde ei vaikuta ääriviivaan (vaikuttaa reunaan).

Herää kysymys - missä tapauksissa ääriviivaa tarvitaan, kun sen rooli luetelluista eroista huolimatta on rajalla kokonaan omaksuttu? Tilanteita ei ole monia, mutta niitä tapahtuu:

• monimutkaisten moniväristen kehysten luominen;
• kehyksen lisääminen elementtiin viemällä hiiren sen päälle;
• piilotetaan reunus, jonka selain lisää automaattisesti joihinkin elementteihin vastaanottaessaan tarkennusta;
• ääriviivaa varten voit määrittää etäisyyden elementin reunasta kehykseen käyttämällä outline-offset -ominaisuutta luodaksesi .

Moniväriset kehykset

Sinun on ymmärrettävä, että ääriviivat eivät millään tavalla korvaa reunaa ja voivat helposti olla yhdessä sen kanssa, kuten esimerkissä 1 näkyy.

Esimerkki 1: Kehyksen luominen

SISÄÄN tässä esimerkissä elementin ympärille lisätään musta kehys, joka erotetaan taustasta valkoisella reunuksella (kuva 1).

Riisi. 1. Kehys elementin ympärille

Kehys käytettäessä:hover

Kun kehys lisätään reunuksen kautta, elementin leveys kasvaa, mikä on varsin havaittavissa, kun yhdistetään border ja :hover pseudoluokka. On kaksi tapaa "voittaa" tämä. Yksinkertaisin asia on korvata reuna ääriviivalla, mikä, kuten tiedämme, ei vaikuta elementin kokoon (esimerkki 2).

Esimerkki 2: Kehys leijuttaessa

ääriviivat eivät aina sovellu, jo pelkästään siksi, että kulmien pyöristäminen ei vaikuta siihen. Toinen menetelmä sopii tähän - lisää näkymätön kehys tai taustaväriä vastaava kehys ja muuta sitten sen parametreja leijuttaessa (esimerkki 3). Tällöin elementtiä ei siirretä, koska kehys on alun perin jo olemassa. Mutta muistamme aina, että elementin leveys on leveyden, vasemman reunan ja oikean reunan arvojen summa. Tilanne on samanlainen korkeuden kanssa.

Esimerkki 3: Kehys leijuttaessa

Reuna lomakekenttien ympärillä

Joissakin selaimissa (Chrome, Safari, uusimmat versiot Opera) pieni kuvake näkyy lomakekenttien ympärillä, kun ne saavat tarkennuksen. värillinen kehys(Kuva 2). Jos haluat poistaa sen, lisää vain arvo none tyyleissä outline-ominaisuuteen esimerkin 4 mukaisesti.

Riisi. 2. Kehys reunusten ympärille

Esimerkki 4. Kehyksen irrottaminen

Kehykset laatikko-varjon kautta

Vaikka box-shadow -ominaisuuden tarkoituksena on lisätä varjo elementin ympärille, sitä voidaan käyttää myös sellaisten reunojen luomiseen, joita ei voi luoda käyttämällä border- tai outline -toimintoa. Tämä kaikki johtuu siitä, että varjojen määrä voi olla rajoittamaton, jonka parametrit on lueteltu pilkuilla erotettuina.

Kehyksen saamiseksi kolme ensimmäistä parametria on asetettava nollaan, ne ovat vastuussa varjon sijainnista ja sen epäterävyydestä. Neljäs parametri sisään tässä tapauksessa vastaa reunuksen paksuudesta, ja viides määrittää reunuksen värin. Toiselle kehykselle neljäs parametri on yhtä suuri kuin kahden kehyksen paksuuksien summa.

Esimerkki 4 näyttää kuinka lisätään kaksi kehystä ja yksi reunus oikealle käyttämällä yhtä box-shadow ominaisuutta.

Esimerkki 4: Box-shadowin käyttö

Tämän esimerkin tulos on esitetty kuvassa. 3.

Riisi. 3. Box-shadow-ominaisuuden luomat kehykset

CSS-reuna elementti on yksi tai useampi rivi, joka ympäröi elementin sisältöä ja sitä pehmuste. Kehys asetetaan oikosulkulla rajan ominaisuuksia. Kehyksen tyyli asetetaan kolmella ominaisuudella: tyyli, väri Ja leveys.

HTML-elementtien kehysten ja reunusten koristelu CSS-ominaisuuksien avulla

1. Reunustyylinen

Oletuksena kehykset piirretään aina elementin taustan päälle taustan ulottuessa elementin ulkoreunaan. Kehyksen tyyli määrittää sen näytön ilman tätä ominaisuutta, kehyksiä ei näytetä ollenkaan. Elementille voit asettaa reunuksen kaikille reunuksille samanaikaisesti käyttämällä border-style-ominaisuutta tai kullekin sivulle erikseen käyttämällä border-top-tyylin hyväksymisominaisuuksia jne. Ei peritty.

Syntaksi

P (reunatyyli: kiinteä;) p (reunus-tyyli: kiinteä;)

2. Kehyksen väri reuna-väri

Ominaisuus määrittää kehysten värin kaikilla puolilla samanaikaisesti. Selvennysominaisuuksien avulla voit asettaa eri värin elementin kummankin puolen reunukselle. Jos kehykselle ei ole määritetty väriä, se on sama kuin elementin tekstin väri. Jos elementissä ei ole tekstiä, reunuksen väri on sama kuin tekstin väri pääelementti. Ei peritty.

Syntaksi

P (reunuksen väri: #cacd58;)

3. Reunuksen leveys

Kehyksen leveys määritetään pituusyksiköillä tai avainsanoilla. Jos border-style -ominaisuuden arvoksi on asetettu ei mitään ja elementin reunukseksi on asetettu jonkin verran leveyttä, niin tässä tapauksessa reunuksen leveys on nolla. Ei peritty.

Syntaksi

P (reunuksen leveys: 2px;)

4. Kehyksen asettaminen yhdellä ominaisuudella

Border-ominaisuuden avulla voit yhdistää seuraavat ominaisuudet: border-width , border-style , border-color , esimerkiksi:

Div (leveys: 100px; korkeus: 100px; reunus: 2px tasainen harmaa;)

Tässä tapauksessa määritettyjä ominaisuuksia sovelletaan elementin kaikkiin reunoihin samanaikaisesti. Jos jotakin arvoa ei ole määritetty, oletusarvo tulee sen tilalle.

5. Kehyksen asettaminen elementin yhdelle reunalle

Jos se on tarpeen asettaa eri tyyliin elementin rajat, voit käyttää vastaavan rajan lyhennettä.
Alla luetellut ominaisuudet yhdistävät seuraavat ominaisuudet yhdeksi ilmoitukseksi: border-width , border-style ja border-color . Ominaisuuksien luettelo määritetään tietyssä järjestyksessä, kun taas yksi tai kaksi arvoa voidaan ohittaa, jolloin niiden arvot ottavat oletusarvot.

Yläreunuksen tyyli asetetaan käyttämällä border-top -ominaisuutta, bottom - border-bottom , left - border-left ja right - border-right .

Syntaksi

P (reuna-yläosa: 2px tasainen harmaa;)

6. Ulkoinen ääriviiva

Ominaisuus määrittää ulkoreunuksen elementtien ympärillä (eli ulkopuolella normaali raja). Tämän ominaisuuden päätarkoitus on korostaa elementtiä. Toisin kuin border-ominaisuuden, tämän ominaisuuden käyttäminen ei vaikuta elementin kokoon tai sijaintiin, koska ääriviivat näkyvät elementtilohkon päällä, mikä puolestaan ​​voi johtaa päällekkäisyyteen marginaalit elementti ja lähialueet.

Lisäksi ulompi ääriviiva, toisin kuin elementin runko, ympäröi elementtiä kaikilta puolilta ja kehystää sen kokonaan.

Ulkoääriviiva on aina suorakaiteen muotoinen, eikä se seuraa sen lohkon reunaa, jolle reunasäde on määritetty.

Outline-ominaisuuden avulla voit yhdistää seuraavat ominaisuudet: outline-color , outline-style , outline-width . Jos jotakin arvoa ei ole määritetty, oletusarvo tulee sen tilalle.

Div (leveys: 100px; korkeus: 100px; ääriviivat: #cacd58 solid 2px;)

6.1. ääriviivatyyliin

Viivanäkymä ulkomuoto on asetettu samalla tavalla kuin elementin kehyksen tyyli. Ei peritty.

Syntaksi

P (ääriviivatyyli: harjanne;)

6.2. Ulkoääriviivan väri ääriviiva-väri

Ulkoääriviivan väri voidaan määrittää vain, kun aseta arvoääriviivatyyliin. Ei peritty.

Syntaksi

P (ääriviivatyyli: harjanne; ääriviivan väri: hopea; )

6.3. Ulkorajan paksuus ääriviiva-leveys

Ulomman ääriviivan paksuus asetetaan samalla tavalla kuin elementin rungon paksuus. Ei peritty.

Syntaksi

P (ääriviivatyyli: pisteviiva; ääriviivan leveys: 5 kuvapistettä; )

Yleisen reunusominaisuuden avulla voit samanaikaisesti määrittää elementin ympärillä olevan reunuksen paksuuden, tyylin ja värin. Arvot voivat olla missä tahansa järjestyksessä, välilyönnillä erotettuina, selain itse määrittää, mikä vastaa haluttu omaisuus. Jos haluat asettaa reunuksen vain elementin tietyille puolille, käytä border-top , border-bottom , border-left ja border-right -ominaisuuksia.

lyhyttä tietoa

Nimitykset

Arvot

Reunuksen leveyden arvo määrittää reunuksen paksuuden. Sen ulkoasun hallitsemiseksi tarjotaan useita reunustyyppisiä arvoja. Heidän nimensä ja toiminnan tulos on esitetty kuvassa. 1.

Kuva 1. Kehystyylejä

border-color määrittää reunuksen värin, arvo voi olla missä tahansa CSS:n sallimassa muodossa.

Esimerkki

Tässä esimerkissä lohkon ympärille lisätään kaksoisreuna. Tulos näkyy kuvassa. 2.

Riisi. 2. Rajaominaisuuden soveltaminen

Objekti malli

Esine.style.border

Huomautus

Selain Internet Explorer kuudenteen versioon asti, reunan paksuus 1px, se näkyy katkoviivoin merkittynä. Kun paksuus on vähintään 2 kuvapistettä, pisteviiva toimii oikein. Tämä virhe on korjattu IE7:ssä, mutta vain kaikille 1px-rajoille. Jos yhden lohkon reunan paksuus on 2px tai enemmän, IE7:ssä pisteviiva muuttuu katkoviivaksi .

Reunatyyli sisään eri selaimet voi vaihdella hieman, kun käytetään ura-, harja-, sisä- tai lähtöarvoja.

Erittely

Jokainen erittely käy läpi useita hyväksymisvaiheita.

• Suositus - W3C on hyväksynyt spesifikaation ja sitä suositellaan standardiksi.
• Ehdokassuositus ( Mahdollinen suositus ) - standardista vastaava ryhmä on tyytyväinen, että se täyttää tavoitteensa, mutta tarvitsee kehitysyhteisön apua standardin toteuttamiseen.
• Ehdotettu suositus Suositeltu suositus) - tässä vaiheessa asiakirja toimitetaan W3C:n neuvoa-antavalle toimikunnalle lopullista hyväksyntää varten.
• Working Draft - Kypsempi versio luonnoksesta, josta on keskusteltu ja jota on muutettu yhteisön tarkistamista varten.
• Toimittajan luonnos ( Toimituksellinen luonnos) - standardin luonnosversio projektin toimittajien tekemien muutosten jälkeen.
• Luonnos ( Erittelyluonnos) - standardin ensimmäinen luonnos.

Muutama oppitunti aiemmin tarkastelimme kaaviomaista esitystä web-sivulohkosta ja puhuimme myös lyhyesti CSS-ominaisuuden rajasta , jota voidaan käyttää elementin reunojen asettamiseen. Tällä kertaa tarkastellaan tätä ominaisuutta yksityiskohtaisemmin esimerkkien avulla.

Reuna sijaitsee marginaalin ja pehmusteen välissä. Tämä tarkoittaa, että marginaali on takana rajaa. Reunus voidaan asettaa kaikille neljälle sivulle (ikään kuin sulkeisi lohkon kehykseen) tai yhdelle, kahdelle tai kolmelle sivulle. CSS:n avulla voit hallita reunusten paksuutta, väriä ja tyyliä. Tutkitaan tätä tarkemmin.

Reunuksen leveys: reunan leveys

Bord-width-ominaisuus määrittää reunuksen leveyden. Useimmiten tämä koko ilmoitetaan pikseleinä. Voit asettaa saman tai eri leveyden kaikille neljälle reunukselle, esimerkiksi:

/* kaikki 4 reunaa ovat 2px leveitä: */ border-width: 2px; /* ylä- ja alareunukset ovat 2px leveitä, vasen ja oikea 4px: */ border-width: 2px 4px; /* yläreuna - 2px, vasen ja oikea - 6px, alareuna - 3px: */ reunuksen leveys: 2px 6px 3px; /* yläreuna - 2px, oikea - 3px, ala - 4px, vasen - 5px: */ reunuksen leveys: 2px 3px 4px 5px;

Lisäksi on avainsanoja, jotka osoittavat reunuksen leveyden:

• ohut - reunus 2px leveä;
• keskikokoinen - reuna 4 kuvapistettä leveä;
• paksu - reunus 6 kuvapistettä leveä.

Reunuksen väri: reunuksen väri

Bord-color-ominaisuus määrittää reunusten värin. Värit voidaan määrittää missä tahansa CSS-muodossa: avainsanoja, heksadesimaali tai RGB - riippuu siitä, mikä on sinulle kätevämpää. Edellisen ominaisuuden mukaisesti voit asettaa joko yhden värin kaikille reunuksille tai valita eri värit jokaiselle reunukselle.

Reunuksen väri: #FFFF00;

Voit myös asettaa läpinäkyvän värin kirjoittamalla:

Reunuksen väri: läpinäkyvä;

Reunustyylinen: reunatyyli

Kiitokset rajatyylinen omaisuus voit tehdä pisteviivan, kaksoisreunuksen, kolmiulotteisen reunuksen tavallisesta reunuksesta - niillä on monia erilaisia ​​merkityksiä. Käytä tätä varten seuraavia avainsanoja:

• kiinteä - kiinteä reuna;
• pisteviiva - pisteiden reuna;
• katkoviiva - katkoviiva;
• kaksoisreuna;
• ura - tilavuuslovin raja;
• harjanne - tilava reuna, jossa on paksu reuna (olennaisesti käänteinen edelliseen tyyliin);
• alku - suulakepuristettu reuna;
• inset - sisennetty reuna (olennaisesti käänteinen edelliseen tyyliin).

Kuten reunan leveys- ja reunaväriominaisuuksien kohdalla, jokainen lohkon reuna voidaan muotoilla eri tavalla - voit esimerkiksi tehdä ylä- ja alareunuksista katkoviivan ja oikean ja vasemman reunan kaksinkertaiseksi. Täällä kaikki riippuu vain mielikuvituksesta.

Reunatyyli: kaksoispiste;

Huomautus: eri selaimissa ulkomuoto rajat voivat olla hieman erilaisia.

Yhteinen CSS-ominaisuuden raja: 3 in 1

Reunuksen tyylin muokkaamiseksi sinun ei tarvitse käyttää kaikkia kolmea yllä olevaa ominaisuutta vuorotellen. Riittää, kun tiedät yleisen yleisen ominaisuuden rajan CSS:n, jolla kirjoitat tyylin paljon nopeammin ja säästät tilaa. Tee tämä kirjoittamalla kaikkien kolmen ominaisuuden arvot satunnaisessa järjestyksessä:

Reuna: 2px katkoviiva #FF0000;

Yksittäisten puolueiden rajat

CSS:n lisäreunusominaisuuksien avulla voit muotoilla kunkin lohkon reunan yksilöllisesti. Seuraavat ominaisuudet auttavat sinua tässä:

• border-top - tyyli yläreunukselle;
• border-right - oikealle rajalle;
• border-bottom - alareunalle;
• border-left - vasemmalle reunalle.

Tulokset

Nyt kun osaat tehdä reunuksia lohkoille, voit harjoitella niiden tekemistä. On monia tapoja kuvata tyyliä ytimekkäästi ilman, että siinä on liikaa rivejä. CSS-tiedosto. Tärkeä rooli tässä on CSS-tyylisivujen periaatteiden tuntemuksella. Katsotaanpa esimerkkiä.

Oletetaan, että haluat luoda kehyksen div-lohko kolme yhtenäistä harmaata reunaa ja alareuna vihreillä pisteillä. Voit kirjoittaa tämän tyylin seuraavasti:

Div (reuna-oikea: 8px double #FF0000; reunus-vasen: 8px double #FF0000; reunus-ala: 8px double #FF0000; reunus-ylä: 4px katkoviiva #FDD201; )

Mutta tämä on liian pitkä postaus. Kaikki tämä voidaan kirjoittaa lyhyesti:

Div (reunus: 8px double #FF0000; reunus yläreuna: 4px katkoviiva #FDD201; )

Kuten edellä mainittiin, tässä hyödynnämme CSS:n peräkkäisiä ominaisuuksia. Kirjoitamme ensin tyylin kehyksen kaikille neljälle sivulle ja määritämme sitten tyylin erikseen alareunalle, jolloin edellinen tyyli korvataan osittain. On erittäin tärkeää seurata tätä rivisarjaa.

Minitehtävä

Yritä luoda div-elementille reunus, jonka mitat ovat 200 x 200 pikseliä. Kehyksen tyylien tulisi olla seuraavat:

• Tee ylä- ja alareunoista kiinteät kiinteä, Kysy heiltä samaa väriä valittavissa ja 5 pikseliä leveä.
• Tee vasen reuna katkonainen, 3 pikseliä leveä, valitse eri väri kuin edellinen.
• Tee oikeasta reunasta kaksinkertainen kaksinkertainen, 7 pikseliä leveä, eri väri kuin kaksi edellistä.

Loppujen lopuksi työsi pitäisi näyttää tältä (paitsi valitsemasi väri):

Tehtävän tulos (katso Chromessa)