Html neliökehys. Kaksoisreunus CSS:llä

CSS3 kehys täydentää kykyä muotoilla elementtien reunoja ominaisuuksilla, jotka mahdollistavat kulmien ympäri elementtiä ja myös käyttöä Kuvat elementin reunojen suunnitteluun.

Pyöristetyt kulmat ja kuvakehykset

1. Kulmien pyöristys reunasäteellä

Selaimen tuki

IE: 9.0
Firefox: 4.0
Kromi: 4.0
Safari: 5.0, 3.1 -verkkopaketti-
Ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: —
Android-selain: 4.1
Kromi Androidille: 44

Ominaisuuden avulla voit pyöristää pienten ja pienten kirjainten kulmia lohkon elementtejä. Kunkin kulman käyrä määritellään yhdellä tai kahdella sen muodon määrittävällä säteellä − ympyrä tai ellipsi. Säde koskee koko taustaa, vaikka elementillä ei olisi reunaa, sekantin tarkka sijainti määritetään background-clip-ominaisuuden avulla.

Rajaussäde-ominaisuuden avulla voit pyöristää kaikkia kulmia kerralla, ja käyttämällä border-top-vasen-säde, border-top-right-radius, border-bottom-right-radius, border-bottom-vasen säde ominaisuuksia voi pyörittää jokaisen kulman erikseen.

Jos asetat raja-säteen ominaisuudelle kaksi arvoa, ensimmäinen arvo pyöristää ylävasen Ja oikeassa alakulmassa ja toinen - Yläoikea Ja alhaalla vasemmalla.

Arvot määritetään / määrittää vaakasuoraan Ja pystysuorat säteet. Omaisuutta ei ole peritty.

Vaihtoehdot

Div (leveys: 100px; korkeus: 100px; reunus: 5px kiinteä;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-säde: 10px 20px - (reunuksen säde: 50 %;).r8 (reunus-ylä: ei mitään; reunus-ala: ei mitään; reuna-säde: 30px/90px;).r9 (reuna-ala-vasen-säde: 100px;).r10 ( reuna -säde: 0 100 %;).r11 (reunuksen säde: 0 50 % 50 % 50 %;).r12 (reuna-ylä-vasen-säde: 100 % 20px; reunus-alha-oikea-säde: 100 % 20px ;)
Riisi. 1. Esimerkkejä erilaisia ​​vaihtoehtoja pyöristää lohkon kulmat

2. Reunakuva

Selaimen tuki

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Kromi: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Ooppera: 15.0, 11.0 -o-
iOS Safari: 7.1
Ooppera Mini: 8 -o-
Android-selain: 4.4, 4.1 -verkkopaketti-
Chrome Androidille: 42

Ominaisuuden avulla voit asettaa kuvan elementin kehykseksi. Kuvan päävaatimus on, että sen on oltava symmetrinen. Ominaisuus sisältää seuraavat arvot: (border-image: leveys lähdeviipaleen toiston alkuun;) .

Tämän avulla yksinkertainen kuva Voit saada nämä kehykset elementille.

/* Esimerkki 1 */ div ( leveys: 260px; korkeus: 100px; reunuksen tyyli: kiinteä; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; 2 Esimerkki 2 png); border-image-slice: 30 border-image-repeat: round);
Riisi. 2. Esimerkki lohkorajojen suunnittelusta kuvan avulla

Leikkaukset A - B - C - D muodostavat rungon kulmat, ja niiden välissä oleva kuvion osa täyttää rungon jäljellä olevan tilan kehyksen mukaisesti. annettu arvo border-image-repeat-ominaisuudet. Kulmaosan koko (tässä esimerkissä numero 30) asetetaan käyttämällä border-image-slice -ominaisuuden arvoa.

2.1. raja-kuvan leveys

Ominaisuus määrittää kuvan leveyden elementin reunalle. Jos leveyttä ei ole määritetty, se on oletuksena 1.

Syntaksi

Div (reunuksen kuvan leveys: 30 pikseliä;) Kuva. 3. Esimerkki kuvakehyksen leveyden asettamisesta käyttämällä erilaisia ​​tyyppejä arvot

2.2. border-image-source

Ominaisuus määrittää polun kuvaan, jota käytetään koristamaan lohkon reunoja.

Syntaksi

Div (border-image-source: url(border.png);)

2.3. border-image-slic -elementit

Ominaisuus määrittää elementin reunojen määrittämiseen käytettyjen kuvaosien koon ja jakaa kuvan yhdeksään osaan: neljään kulmaan, neljään kulmien väliseen reunaan ja keskiosaan.

Syntaksi

Div (reunakuva: 50 20;)
Riisi. 4. Esimerkki kuvakehysosien määrittämisestä

2.4. raja-kuva-toisto

Kiinteistöjen hallintapaneelit taustakuva tilaa kehyksen kulmien väliin. Voidaan määrittää käyttämällä joko yhtä arvoa tai arvoparia.

Syntaksi

Div (border-image-repeat: toista;) Kuva. 5. Esimerkki kuvakehyksen keskiosan toistamisesta käyttämällä erilaisia ​​arvoja

2.5. border-image-outset

Ominaisuuden avulla voit siirtää kuvakehystä elementin rajojen ulkopuolelle määritetyn pituuden verran. Voidaan määrittää käyttämällä yhtä tai neljää arvoa.

Syntaksi

Div (reunus-kuva-alku: 10px;)
Riisi. 6. Esimerkki kuvakehyksen siirtämisestä erityyppisten arvojen avulla

3. Ulkokehyksen poikkeama ääriviiva-offset

Ominaisuus määrittää border-elementin reunuksen ja outline-ominaisuuden avulla luodun ulkoreunuksen välisen etäisyyden.

4. Gradienttikehys

Reunuskuvan arvo voi olla paitsi kuva, myös gradienttitäyttö.

Läpinäkyvä kehys

Läpinäkyvä on yksi väreistä. Tällä tavalla voit asettaa rajat elementin kaikille sivuille kerralla tai erikseen kullekin sivulle. Reunan paksuutta ohjaa rajan leveysominaisuus.

Postikuori

Reunat ovat viivoja, jotka ympäröivät elementtiä (sen sisältö ja sen ympärillä oleva täyte). Esimerkki, jonka olemme jo kohdanneet, ovat solukehykset taulukon sisällä.

CSS tarjoaa kahdentyyppisiä reunuksia: sisäreunat ja ulkoiset linjat. Kehysten suunnittelusta vastaavat CSS-ominaisuudet alkavat sanalla "border", joka voidaan kääntää "Frame", "Border". Ulkoääriviivan olemassaolo ja muoto määritetään ominaisuuksilla, jotka alkavat sanalla "outline". Ääriviivat, toisin kuin reuna, eivät vaikuta kehystetyn lohkon leveyteen ja sijaintiin. Lisäksi sitä ei voi asentaa vain yhdelle puolelle, kuten rajaa- vain kaikilta puolilta kerralla.

Puhutaan ensin rajasuunnittelusta, sitten siirrytään siihen ääriviivat.

reunan leveys

Asettaa reunuksen leveyden. On selvää, että oletusarvoisesti elementtiä ympäröivät kehykset neljältä sivulta. Ominaisuuden avulla voit asettaa reunusten leveyden joko samaksi kaikille sivuille tai eri kullekin sivulle. Sen mukaan, mikä leveys millekin reunukselle on määritettävä, voit määrittää säännössä yhdestä neljään arvoa.

Voit asettaa leveyden joko käyttämällä tavallisia pikseleitä, prosentteja ja muita CSS-pituusyksiköitä tai käyttämällä varattuja sanoja ohut(2px), keskikokoinen(4px) ja paksu(6px).

Reunuksen leveys: 16px 12px 4px 8px;

rajatyyliin

Määrittää reunatyylin. Huomaa, että jos et aseta tätä sääntöä, mutta määrität ominaisuuden reunan leveys, silloin kehyksiä ei tule ollenkaan, joten jos haluat näkyvät reunat, muista määrittää rajatyyliin.

Kiinteistöllä voi olla monia arvoja, jotka kaikki näkyvät selvästi alla olevasta kuvasta.

Viimeinen kappale osoittaa, että kehyksen tyyli, kuten paksuus, molemmilla puolilla voi olla oma:

reunatyylinen: kiinteä kaksoispiste ei yhtään

reunuksen väri

Toimii samalla tavalla kuin edelliset ominaisuudet, mutta vastaa reunusten väristä. Voit myös asettaa sen yhdestä neljään arvoon, ja tiedät jo tuloksen. Jos sääntöä ei ole asetettu, kehyksillä on nykyisen elementin tekstiväri tai, jos tätä ei ole määritetty, pääelementin tekstin väri.

Reunuksen väri: #C85EFA;

rajaa

Helpottaa kirjoittamista ja tallentaa koodia sallimalla kaikkien lueteltujen ominaisuuksien asettamisen elementin joka puolelle reunukselle yhdellä rivillä:

P (reunus: 2px tasainen vihreä;)

Asetuksiin erilaisia ​​sääntöjä kehyksiä kanssa eri puolia seuraavia arvoja voidaan käyttää:

• reuna-yläosa- yläraja.
• raja-oikea- oikein.
• raja-ala- alempi.
• raja-vasen- vasemmalle.

P (vasen reuna: 6 pikseliä keltaisella katkoviivalla; )

ääriviivan leveys

Sama kuin reunan leveys, vain ulkoiseen käyttöön, ei sisäkehys. Asettaa ääriviivan paksuuden samoihin arvoihin kuin reunan leveys. Elementin kehyksen paksuuden lisäksi sinun on määritettävä sen tyyli, muuten ääriviivaa ei tule.

ääriviivatyyliin

Kiinteistöjen arvot ovat päällekkäisiä rajatyyliin. Sääntö määrittää ulkoääriviivan tyylin.

Tämä ominaisuus luo reunuksen elementin ympärille. Voit lukea lisää tästä kiinteistöstä linkistä, ja tässä artikkelissa kuvailen yleisesti, kuinka se toimii. Nämä tiedot riittävät ymmärtämään, kuinka kehyksiä tehdään CSS:n avulla.

Reunusominaisuuden syntaksi on yksinkertainen: border: 1px solid black; . Tällä ominaisuudella on kolme merkitystä:

• 1px - reunan paksuus.
• kiinteä - kehystyyppi, kiinteä on yhtenäinen viiva, double on kaksoiskiinteä viiva, katkoviiva on katkoviiva. Reunuksia on useita muitakin, niistä löydät tietoa täältä: CSS border.
• musta - määrittää reunan värin. Värit voidaan määrittää nimellä, kelvollisia arvoja ovat täällä: CSS-väritaulukko tai heksadesimaalikoodi. Kuinka tämä tehdään, on kuvattu artikkelissa: värit CSS:ssä.

CSS-tekstikehys

Tässä on esimerkki border ominaisuuden käyttämisestä yhden pikselin leveän ja mustan reunuksen luomiseen:

Tälle kappaleelle on määritetty luokka esimerkki-1.

Tässä esimerkissä käytimme myös ominaisuutta CSS-täyte, tai pehmuste. Tämä ominaisuus määrittää sisennyksen määrän tekstistä viivaan (elementin reunaan).

Katsotaanpa toista yksinkertaista esimerkkiä asian ymmärtämiseksi. Luodaan kehys, jonka leveys on kolme pikseliä punaisena ja ilman pehmuste (CSS-ominaisuus pehmuste).

Tälle kappaleelle on annettu luokka esimerkki-2.

Kuten näemme, ilman pehmustetta tekstikehys näyttää sarvimaiselta.

Kuinka tehdä kuvakehys CSS: ssä

Kuvien kehykset asetetaan samalla tavalla border-ominaisuuden avulla. Tehdään kehys Vihreä väri Kuvan paksuus 4 pikseliä.

Esimerkki-kuva ( reunus: 4px tasainen vihreä; )

Näin tämä koodi toimii:

Kuinka pyöristää kehyksen kulmat CSS:ssä

Reunuksen kulmien pyöristäminen CSS:ssä tehdään border-radius-ominaisuuden avulla. Tämä ominaisuus esiteltiin CSS3:ssa ja toimii kaikissa nykyaikaisissa selaimissa.

Raja-säde-ominaisuuden arvo voi olla yhdestä neljään. Jos arvo on yksi, se asettaa pyöristysasteen kaikille kulmille. Otetaan esimerkki siitä, kuinka tämä ominaisuus toimii yhdellä arvolla.

Esimerkki 3 (reunus: 1px tasainen musta; reunuksen säde: 15px; täyte: 10px; )

Näin se toimii:

border-radius -ominaisuus: 15px.>

Jos lohkolla ei ole reunusta, on reunan reunan leveys: 0; , täytetty alue pyöristetään taustaväri(taustaväriominaisuus). Tässä on esimerkki:

Esimerkki-4 ( reunuksen leveys: 0; // vaikka tämä arvo on oletuksena 0 taustaväri: #DDD; reunuksen säde: 15px; täyte: 10px; )

Tämä esimerkki toimii seuraavasti:

border-radius -ominaisuus: 15px.>

Kuten aiemmin kirjoitin, border-radius-ominaisuus voidaan asettaa yhdestä neljään arvoon. Alla oleva taulukko kuvaa, kuinka kukin arvoyhdistelmä toimii.

Raja-säde-ominaisuuden arvot voidaan määrittää prosentteina.

Piirretään ympyrä CSS:ssä. Ota tämä 100 x 100 pikselin neliölohko ja pyöristä se CSS kulmat raja-säde: 50 % sääntö.

Esimerkki-5 (leveys: 100px; korkeus: 100px; taustaväri: #F00; reunuksen säde: 50%; )

Tämä esimerkki toimii seuraavasti:

Tämä kattaa aiheen "kehykset CSS:ssä" kokonaan. Onnea CSS:n oppimiseen!

Hyvää päivää kaikille. Aleksei Gulynin on yhteydessä. Viimeisessä artikkelissa opit muotoilemaan tekstiä CSS:ssä. Tässä artikkelissa haluaisin kertoa sinulle, mikä se on kehyksiä CSS:ssä ja miten niitä käytetään. Kehystä koskevat säännöt koostuvat kolmesta elementistä: kehyksen paksuus, tyyli ja väri. Luodaan seuraavan sisällön sisältävä index.html-tiedosto:

Samalla sivulla asetamme tyylit lohkolle, jossa on id = tester (sivun otsikon sisään lisäämme seuraavat rivit):

Rajanleveysominaisuus vastaa kehyksen leveydestä, rajatyylinen omaisuus vastaa reunuksen tyylistä, border-color — reunuksen väristä. Ensimmäisen ja kolmannen ominaisuuden kanssa kaikki on selvää. Kaikki arvot, jotka border-tyylinen ominaisuus voi saada, on esitetty alla olevassa kuvassa:

Jos nyt avaamme sivumme selaimessa, näemme, että korttelin ympärillä on kiinteä runko punainen väri 1px leveä.

Minä näytin sinulle tämän pitkä sisääntulo kehykset CSS:ssä ( tämä merkintä on erittäin hankala eikä yleensä kukaan käytä sitä). Kaikki ohjeet voidaan sisällyttää yhdelle riville. Meidän tapauksessamme se näyttää tältä:

Reuna: 1px tasainen punainen;

Nuo. Ilmoitamme ensin kehyksen paksuuden, sitten kehyksen tyylin ja värin.

Olet todennäköisesti huomannut, että kehys ilmestyi kaikilta neljältä sivulta. Kehykset voidaan asettaa mille tahansa sivulle erikseen (päällä konkreettinen esimerkki se tulee selväksi):

Yläreunus: 2px tasainen punainen; reuna-ala: 3px katkovihreä; reunus vasen: 6px katkoviiva keltainen; reuna-oikea: 5px double #fe54e5;

Näet, että kaikilla 4 puolella on erilaisia ​​kehyksiä. Jos et määritä kehystä jollekin puolelle, siellä ei ole kehystä.

Kehyksiä käytetään ehdottomasti kaikkialla: on melkein vaikea löytää verkkosivuston suunnittelua, jossa ei käytetä kehyksiä. Hyvin usein valikon kohdat erotetaan pystyviivalla, joka määritellään border-right- tai border-left-ominaisuuden avulla. Voit myös tehdä mielenkiintoisia tehosteita linkeissä. Kotitehtävä juuri tästä aiheesta:

Sinun on luotava sivu ja asetettava sille 2 linkkiä. Linkin tietotyyli: kiinteä viiva, hiiri tämä rivi pitäisi tulla pilkuksi.

On myös erittäin hyvä käyttää kehyksiä elementeille sivua asetettaessa, jotta ymmärtäisi paremmin, missä kukin elementti sijaitsee. Tekijä: vähintään, minun on paljon selkeämpää ja selkeämpää kirjoittaa.

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(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

Tässä esimerkissä elementin ympärille on lisätty musta kehys, joka on erotettu 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 hoverissa

ääriviivat eivät aina ole sopivia, jos vain 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 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 Opera versiot) pieni värillinen kehys näkyy lomakekenttien ympärillä, kun ne saavat tarkennuksen (kuva 2). Voit poistaa sen lisäämällä tyyleissä ääriviiva-ominaisuuteen arvo none, kuten esimerkissä 4.

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ö

Tulos tämä esimerkki esitetty kuvassa. 3.

Riisi. 3. Box-shadow-ominaisuuden luomat kehykset