Css-kaksoisreuna. Kehyksiä ja rajoja. Sisennetty rivi CSS

Voit hallita elementin reunaa käyttämällä yleistä border-ominaisuutta. Tämän ominaisuuden avulla voit määrittää elementin reunuksen paksuuden, tyylin ja värin yhdessä ilmoituksessa.

Nämä kolme ominaisuutta (reunuksen paksuus, reunuksen tyyli ja väri) voidaan asettaa yhdessä ilmoituksessa. Tässä on esimerkki:

Voit määrittää reunatyylin vain elementin toiselle puolelle. Tätä tarkoitusta varten he käyttävät rajan ominaisuuksia-ylä (ylempi reuna), reunus-oikea (oikea reuna), border-bottom (alareuna), reuna-vasen (vasen reuna).

Tässä esimerkissä lohkon jokaisella puolella on erilainen reunuksen paksuus, tyyli ja väri.

Mieti, kuinka voit luoda tällaisen muodon CSS:n avulla:

Reunusarvot - paksuus, tyyli ja väri - voidaan asettaa erikseen erityisominaisuuksien avulla.

• border-style - reunatyyli.
• border-width - reunuksen leveys.
• border-color - reunuksen väri.

Tarkastellaan jokaista arvoa erikseen.

rajatyylinen omaisuus Reunuksen tyyli.

Reunustyylinen ominaisuus määrittää reunuksen tyylin. CSS:ssä sisään HTML-erot, elementin reuna ei voi olla vain kiinteä. Seuraavat arvot ovat sallittuja reunatyylille:

1. ei mitään - ei reunaa (oletus).
2. kiinteä - kiinteä reuna.
3. kaksoisreuna.
4. katkoviiva - katkoviiva.
5. pisteviiva - pisteiden sarjasta tehty reunus.
6. harjanne - "harjanteen" reuna.
7. ura - "uran" reuna.
8. upotettu reunus.
9. alku - suulakepuristettu reuna.

Esimerkkejä miltä ne näyttävät.

ei reunaa (ei mitään)

kiinteä reuna

kaksoisreuna

pistesarjan reuna (pisteviiva)

katkoviiva

uran reuna

harjanteen reuna

sisennetty reuna (umpi)

puristettu reuna (alku)

Muuten, jos asetat reunan väriksi harjanteen kehyksen mustaksi, saat tämän tuloksen.

Div-lohko mustalla reunuksella ja harjanteella.

Kehys näyttää kiinteältä, mutta tämä johtuu siitä, että harjanteen tyyli luodaan lisäämällä musta varjotehoste, eikä musta vaikutus näy mustassa kehyksessä.

Reunustyylin ominaisuuden avulla reunatyyli voidaan asettaa paitsi lohkon kaikille puolille. On mahdollista asettaa useita arvoja yhdelle reunatyyliselle ominaisuudelle arvojen lukumäärästä riippuen, rajatyyli määritetään eri numero lohkon sivut. Voit asettaa yhden, kaksi, kolme tai neljä arvoa. Katsotaanpa esimerkkejä kustakin tapauksesta.

Yksi arvo (kiinteä) - reunatyyli asetetaan lohkon kaikille puolille.

Kaksi arvoa (kiinteä kaksinkertainen) - ensimmäinen arvo asettaa tyylin ylä- ja alapuolelle, toinen sivulle.

Kolme arvoa (kiinteä kaksoispiste) - ensimmäinen arvo yläpuolelle, toinen sivuille, kolmas alapuolelle.

Neljä arvoa (kiinteä kaksinkertainen katkoviiva) - jokainen arvo yhdelle puolelle myötäpäivään alkaen ylhäältä.

Rajanleveys omaisuus. Reunan paksuus.

Voit määrittää elementin reunuksen leveyden käyttämällä border-width -ominaisuutta. Reunuksen paksuus voidaan asettaa mihin tahansa absoluuttiset yksiköt mittaukset, esimerkiksi pikseleinä.

Kuten rajatyylisen ominaisuuden, ominaisuuden arvoksi voidaan määrittää yhdestä neljään. Katsotaanpa esimerkkejä kustakin tapauksesta.

Esimerkkikoodi:

Myös rajanleveysominaisuuden osalta on arvot muodossa avainsanoja. Niitä on yhteensä kolme:

• ohut - ohut reuna;
• keskimääräinen - keskimääräinen paksuus;
• paksu - paksu reuna;

Reunuksen paksuus: ohut.

Reunan paksuus: keskikokoinen.

Reunan paksuus: paksu.

Reunusväriominaisuus. Reunuksen väri.

Voit hallita reunuksen väriä käyttämällä reunavärityökalua. Tämän ominaisuuden värit voidaan asettaa millä tahansa menetelmällä, joka on kuvattu artikkelissa "Värit CSS:ssä", nimittäin:

• Värin heksadesimaalimerkintä (#ff00aa).
• RGB-muoto- rgb(255;12,110) . RGBA-muoto CSS3:lle.
• HSL-muodot ja HSLA CSS3:lle.
• Värin nimi, esimerkiksi musta. Täysi lista Värien nimet on annettu CSS-värien nimitaulukossa.

Reunusväri-ominaisuudella voi myös olla yhdestä neljään arvoa ja se käsittelee niitä samalla tavalla kuin edelliset ominaisuudet.

Yksi arvo (punainen).

Kaksi arvoa (punainen musta).

Kolme arvoa (punainen musta keltainen).

Neljä arvoa (punainen musta keltainen sininen).

Palataan nyt yllä mainittuun ongelmaan ja piirretään kuvio:

Tässä on koodi, joka piirtää tällaisen kuvion, vain suurempana:

Sivujen arvojen asettaminen erikseen

Yllä mainittiin, että voit määrittää rajan ominaisuusarvot vain lohkon yhdelle puolelle. Näitä tarkoituksia varten on kiinteistöjä:

• reuna-yläosa
• raja-oikea (oikea reuna)
• raja-ala
• border-left (vasen reuna)

Haluan muistuttaa, että kaikille ominaisuuksille on määritetty kolme arvoa (paksuus, tyyli ja väri) missä tahansa järjestyksessä. Mutta on ominaisuuksia, joiden avulla voit asettaa paksuuden, värin ja tyylin kummallekin puolelle erikseen. Näiden ominaisuuksien kirjoitus on johdettu yllä olevasta.

Yläreunuksen vaihtoehdot (reuna-yläosa).

• border-top-color - määrittää elementin yläreunuksen värin.
• border-top-width – määrittää elementin yläreunan paksuuden.
• border-top-style - määrittää elementin yläreunuksen tyylin.

Oikean reunan vaihtoehdot (reuna-oikea).

• border-right-color - määrittää elementin oikean reunan värin.
• border-right-width - määrittää elementin oikean reunan paksuuden.
• border-right-style - määrittää elementin oikean reunan tyylin.

Alareunan vaihtoehdot (reuna-ala).

• border-bottom-color - määrittää elementin alareunuksen värin.
• border-bottom-width - määrittää elementin alareunan paksuuden.
• border-bottom-style - määrittää elementin alareunuksen tyylin.

Vasemman reunan vaihtoehdot (reuna-vasen).

• border-left-color - määrittää elementin vasemman reunan värin.
• border-left-width - määrittää elementin vasemman reunan paksuuden.
• border-left-style - määrittää elementin vasemman reunan tyylin.

Esimerkki näiden ominaisuuksien käytöstä:

Raja-säteen omaisuus. Reunuskulmien pyöristäminen.

border-radius-ominaisuus on tarkoitettu pyöristämään elementin reunojen kulmat. Tämä ominaisuus ilmestyi CSS3:ssa ja toimii kaikin puolin oikein nykyaikaiset selaimet, lukuunottamatta Internet Explorer 8 (ja vanhemmat versiot).

Arvot voivat olla mitä tahansa CSS:ssä käytettyjä numeroita.

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Jos lohkokehystä ei ole määritetty, fileointi tapahtuu taustan kanssa. Tässä on esimerkki lohkon pyöristämisestä ilman kehystä, mutta sen kanssa taustaväri:

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Elementin jokaisen kulman pyöristämiseen on ominaisuuksia. Tämä esimerkki käyttää niitä kaikkia:

Reunus-ylävasen-säde: 15px; raja-ylä-oikea-säde: 0; reunus-ala-oikea-säde: 15px; raja-ala-vasen-säde: 0;

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Vaikka tämä koodi voidaan kirjoittaa yhteen ilmoitukseen: border-radius : 15px 0 15px 0 . Tosiasia on, että border-radius-ominaisuus voidaan asettaa yhdestä neljään arvoon. Alla olevassa taulukossa esitetään säännöt, jotka koskevat tällaisia ​​ilmoituksia.

Kun olet tutkinut tämän taulukon huolellisesti, voit ymmärtää sen parhaiten lyhyt huomautus haluttu tyyli on seuraava: border-radius : 15px 0 . On vain kaksi merkitystä.

Vähän harjoittelua

Sitruunan piirtäminen CSS:llä.

Tässä on koodi tällaiselle lohkolle:

Marginaali: 0 auto; /* Keskitä lohko */ leveys: 200px; korkeus: 200px; tausta: #F5F240; reuna: 1px kiinteä #F0D900; reunan säde: 10px 150px 30px 150px;

Olemme jo piirtäneet kuvion:

Jätetäänpä siitä nyt kolmio:

Kolmion koodi on:

Marginaali: 0 auto; /* Aseta lohko keskelle */ täyte: 0px; leveys: 0px; korkeus: 0; reunus: 30px tasainen valkoinen; reuna-ala-väri: punainen;

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):

Bord-width-ominaisuus vastaa reunuksen leveydestä, border-style-ominaisuus vastaa reunuksen tyylistä ja border-color-ominaisuus vastaa 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ä lohkon ympärille on ilmestynyt kiinteä punainen kehys, jonka leveys on 1px.

Näytin sinulle pitkän kehyksen merkinnän 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äreuna: 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ä. Näiden linkkien suunnittelutyyli on kiinteä viiva, kun leijuu viiva, siitä tulee katkoviiva.

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.

Tässä kappaleessa:

Lohkomalli on tapa näyttää elementtejä selaimilla, jotka käsittelevät kaikki tunnisteet pieninä lohkoina, heille mikä tahansa tagi on kontti, jossa on sisältöä: tekstiä, kuvia, muita tageja jne.

• Marginaali(marginaali) - tyhjä tila (marginaali), joka erottaa elementin toisesta. Yksinkertaisin esimerkki sisennyksestä on toisiaan seuraavien kappaleiden väli. Reunusalue on läpinäkyvä, eikä sillä voi olla omaa väriä tai muita suunnitteluvaikutuksia.
• Raja(elementin reuna) - reunus elementin millä tahansa puolella. Kehys voidaan asentaa elementin kaikille sivuille tai yhdelle puolelle. Kehyksen avulla voit yksinkertaisesti koristella elementin kauniisti tai erottaa visuaalisesti nykyisen elementin sisällön muista sivun elementeistä.
• Pehmuste(täyte) - tyhjä tila elementin sisällön ja sen reunan välillä. Pehmustealue on läpinäkyvä, eikä sillä voi olla omaa väriä tai muita suunnitteluvaikutuksia.
• Useimmilla elementeillä on sisältöalue, joka sisältää kaiken sisältö elementti (teksti, lisätyt kuvat tai muut elementit).

Kehys

Reuna on yksinkertainen viiva, joka näkyy muotoilemasi elementin ympärillä. Mutta ei ole ollenkaan välttämätöntä käyttää kehystä, joka ympäröi elementtiä joka puolelta. Voit lisätä sen vain elementin halutulta puolelta. Jos esimerkiksi lisäät reunuksen vain lohkoelementin alapuolelle, se tuottaa saman vaikutuksen kuin elementti

Jokaisella kehyksellä on kolme ominaisuutta, joita voimme hallita CSS:n avulla: leveys, tyyli ja väri, katsotaanpa, mitä ominaisuuksia voit käyttää niiden asettamiseen ja muuttamiseen:

Sen sijaan, että määrität kaikki kolme ominaisuutta, voit määrittää vain yhden - border-ominaisuuden, jonka avulla voit määrittää samanaikaisesti reunuksen leveyden, tyylin ja värin:

Ensimmäinen kappale.

Toinen kappale.

Kolmas kappale.

Voit ohjata kehystä erikseen elementin kummallakin puolella käyttämällä seuraavia ominaisuuksia:

• border-top - yläkehys
• border-left - vasen kehys
• border-right - oikea kehys
• border-bottom - alakehys

Nämä ominaisuudet toimivat täsmälleen samalla tavalla kuin border-ominaisuus, paitsi että niiden avulla voit hallita vain muotoilemasi elementin toisella puolella olevaa reunaa.

Ulko- ja sisäreunat

Sisennys- tyhjä tila elementin sisällön ja sen reunuksen välillä (jos se on asennettu). Voit lisätä ja hallita täytön leveyttä elementin kaikilla neljällä sivulla käyttämällä täyteominaisuutta.

Marginaali on tyhjä tila, joka erottaa elementin muista elementeistä tai selainikkunan reunoista. Leveyden lisääminen ja säätäminen marginaalit Marginaaliominaisuutta käytetään elementin kaikilla neljällä sivulla.

Täyte- ja marginaaliominaisuudet voivat olla yhdestä neljään arvoa:

Jos arvot asetetaan myötäpäivään alkaen ylhäältä:

Jos määrität ominaisuuksille vain yhden arvon, kaikkien sivujen sisennykset ovat saman levyisiä.

Ensi näkemältä näkyvä vaikutus kun näitä ominaisuuksia käytetään, ne näyttävät samalta, jotta voit huomata visuaalisen eron niiden välillä, voit esimerkiksi asettaa reunuksen elementille tai asettaa tausta:

Tavallinen kappale.

Sisennyksille ja kehyksille on ominaisuuksia, joiden avulla voit hallita sisennyksen kokoa kummallakin puolella erikseen. Täyttöä ohjataan seuraavilla ominaisuuksilla: padding-top , padding-right , padding-bottom ja padding-left . Ulkoisia marginaaleja ohjaavat ominaisuudet: margin-top , margin-right , margin-bottom ja margin-left .

Huomautus: arvot pehmusteominaisuudet ja marginaali eivät periydy lapsielementtejä, joten sinun on määritettävä täyteleveys erikseen jokaiselle sitä tarvitsevalle elementille.

Elementin leveys ja korkeus

Oletusarvo lohkon elementtejä automaattileveyttä käytetään. Tämä tarkoittaa, että elementti venyy täsmälleen niin paljon kuin se on Vapaa tila. Lohkoelementtien oletuskorkeus asetetaan automaattisesti, ts. Selain venyttää sisältöaluetta pystysuunnassa niin, että kaikki sisältö näkyy. Voit määrittää mukautetut mitat elementin sisältöalueelle käyttämällä leveys- ja korkeusominaisuuksia.

Katsotaanpa jotain dokumenttia. Siihen muodostetaan HTML-elementtejä (näkyy selaimen näytöllä). Ne muodostetaan tunnisteiden perusteella. Asetat tunnisteet, ne käsitellään html-jäsennin(saatavilla missä tahansa selaimessa) ja rakentaa html-elementtejä. Ja miltä nämä elementit näyttävät, määrittää CSS.

Kaikissa html-elementeissä on 4 aluetta: täytealue, reunus, täyte ja elementin sisältö. Mihin niitä tarvitaan?

• Ulkoisia marginaaleja (marginaali) tarvitaan säätelemään tämän elementin vuorovaikutusta muiden elementtien rajojen kanssa.
• Täyte on etäisyys kehyksestä tietyn elementin sisältöön.
• Itse elementin sisältö. Se on selvä täällä. Jos sisäkkäisiä elementtejä on, ne sijaitsevat tällä alueella.
• Kehys (reuna). Piirtää elementin rajat. Kaavamaisesti nämä 4 aluetta voidaan esittää seuraavasti:

On ymmärrettävä, että jokainen elementti sijaitsee jollain alueella. Tätä sen sisällä olevan elementin aluetta kutsutaan säiliöksi. Nuo. Säiliö on pääelementin sisältöalue. Tämä alue määrittää tilan sisäisen elementin rakentamiseen. Tämä tarkoittaa, että sisäinen elementti mukautuu tämän alueen koon mukaan.

Marginaalit

Tällöin elementtimme on vuorovaikutuksessa säilön rajojen ja viereisten elementtien rajojen kanssa (niiden, jotka sijaitsevat sen vieressä koodissa). Perussäännöt:

• margin-top: auto|magnitude|% - ylämarginaali.
• margin-right: auto|magnitude|% - oikea marginaali.
• margin-bottom: auto|magnitude|% - alamarginaali.
• margin-left: auto|magnitude|% - vasen marginaali.
• marginaali: marginaali-ylämarginaali-oikea marginaali-alempi marginaali-vasen – esivalmistettu sääntö.

Arvo "auto" tarkoittaa, että selain jäsentää nämä arvot itsenäisesti. Sisennyskoko voidaan määrittää seuraavilla arvoilla: em, ex, px. Prosenttiosuudet (%) lasketaan säilön leveydestä (emoelementin sisältöalueelta). Jos määrität negatiivisen arvon, ylätason säilön sisällä olevien elementtien reunat törmäävät toisiinsa.

"Marginaalin" sääntö on yhdistetty, kaikkien 4 marginaalin arvot (alkaen ylhäältä ja myötäpäivään). Esimerkkejä:

Marginaali: 10px 20px 20px 30px; marginaali: 10px 20px 30px; - marginaali vasemmalta oikealle on sama marginaali: 10px 20px; - marginaali ylhäältä alhaalta ja vasemmalta oikealta on sama marginaali: 10px; - kaikki sisennykset ovat samat

Pehmuste

Tässä ei voi olla negatiivisia arvoja, koska Sisältöä on mahdotonta siirtää elementin kehyksen ulkopuolelle. Prosentit lasketaan säiliön leveyden perusteella.

• täyte-top: arvo|%.
• täyte-oikea: arvo|%.
• padding-bottom: arvo|%.
• täyte-vasen: arvo|%.
• pehmuste: pehmuste-yläpehmuste-oikea pehmuste-alempi pehmuste-vasen - esivalmistettu sääntö. Samanlainen kuin "marginaali".

Reunat CSS:ssä

Kaikilla kehyksillä on seuraavat ominaisuudet:

• Paksuus - reuna-leveys: arvo (ohut|keskikokoinen|paksu). Oletusarvo on medium.
• Väri - reuna-väri: väri. Oletus on tämän elementin fontin väri.
• Tyyppi - reunatyylinen: ei mitään|pisteinen|katkoviiva|kiinteä|kaksois|ura|harjanne|umpi|aloitus. Tyypit: ei kehystä | pisteitä | pilkullinen | kiinteä | kaksinkertainen | helpotuksen jäljitelmä.

Itse kehyksen säännöt:

• border-top- (leveys|väri|tyyli).
• border-right- (leveys|väri|tyyli).
• border-bottom- (leveys|väri|tyyli).
• border-left- (leveys|väri|tyyli).
• border: border-width border-style border-color. Joukkueen sääntö.

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 kolme pikseliä leveä kehys, punainen ja ilman pehmusteita ( CSS-ominaisuus pehmuste).

Tälle kappaleelle on annettu luokka esimerkki-2.

Kuten näemme, ilman sisäistä pehmuste tekstikehys näyttää sarveiselta.

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 olemassa reunuksen leveys: 0; , silloin taustavärillä täytetty alue pyöristetään (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ä. Voit tehdä tämän ottamalla 100 x 100 pikselin neliön lohkon ja pyöristämällä kulmat CSS-sääntö rajan säde: 50 % .

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

Tämä esimerkki toimii seuraavasti:

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