CSS: reuna. Elementtien rajat. Ulkokehyksen ääriviivojen siirtymä. Monimutkaiset css-reunusrakenteet

Voit myös tehdä pyöristetyt reunat vain elementin ylä- tai alakulmalle tai anna kullekin kulmille erilainen pyöristyssäde - paljon tilaa mielikuvitukselle! Esimerkki:

BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunuksen säde: 25px; ) .borderElement1 ( taustaväri: #FFE8DB; reunus: 6px kiinteä #FF5A00; reunan säde: 15px 100px 15px; 100)

Mutta siinä ei vielä kaikki: yksinkertaisen sijaan pyöreät kulmat voit määrittää elliptisen pyöristyksen. Tätä varten sinun on määritettävä kaksi kauttaviivalla erotettua arvoa (ellipsin vaaka- ja pystysuoralle puoliakselille). Otetaan esimerkki 150×450 pikselin lohkosta:

BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunan säde: 280px/100px; )

Arvot voidaan sekoittaa (eli käyttää sekä tavallista että elliptistä pyöristystä samalla tyylillä), ja voit myös lisätä henkilökohtainen tyyli kullekin kulmille sopivilla ominaisuuksilla:

• border-top-left-radius - vasempaan yläkulmaan;
• border-top-right-radius - oikealle yläkulmalle;
• border-bottom-left-radius - vasempaan alakulmaan;
• border-bottom-right-radius - oikeaan alakulmaan.

Kulmien pyöristyksen periaate

Alla oleva kuva näyttää, kuinka kulmien pyöristys lasketaan CSS:ssä. Joten jos kulmalle on määritetty yksi arvo - esimerkiksi 20px - tämä tarkoittaa, että pyöristys tapahtuu ympyrää, jonka säde on 20 pikseliä. Jos kaksi arvoa on erotettu vinoviivalla, esimerkiksi 30px/20px , kulmat pyöristetään ellipsin mukaan. Ensimmäinen arvo on tässä tapauksessa ellipsin vaakasuuntaisen puoliakselin pituus - 30 pikseliä ja toinen arvo on pystysuoran puoliakselin pituus - 20 kuvapistettä:

Omaisuus CSS-reunan säde kaikkien tukemana modernit versiot selaimet.

Luulen, että kaikki osaavat tehdä pyöristettyjä kulmia lohkoille - iso ongelma. Selaimien välistä ratkaisua ei ole vielä olemassa ilman JS-sauvoja. IE9:n julkaisun myötä päänsärkyä on vähemmän, mutta jos olet edelleen kiireinen IE6/7:n koodaamisessa, tämä ei ole sinulle pelastus. Mutta vaikka IE6/7 vaipuisi unohdukseen, kestää vielä kauan ennen kuin unohdamme tämän selaimen 8. version, joka ei myöskään tue border-radius-parametria. Toisin sanoen, sivustomme toimivat JavaScript-steroideilla pitkään.

Pyöristetyistä muodoista on kirjoitettu paljon artikkeleita, mutta ne kaikki (ne, jotka löysin) vaikenevat korjausten käytön hienouksista ja vivahteista olemassa oleva ongelma. Yritän luetella kaikki vaikeudet, joita kohtasin käyttäessäni suosittuja ratkaisuja.

Aluksi sanon muutaman sanan siitä, miten tilanne on muuttumassa raja-säde kun uusia selainversioita julkaistaan.

Ensinnäkin FireFoxin versio 4 ei enää tarvitse omaa -moz-border-radius -parametria. IE9, kuten jo sanoin, toteuttaa myös border-radius-tuen, ainakin RC-versiossa se on jo olemassa. Kaikki on ollut loistavaa Operassa versiosta 10.5 lähtien.

Nyt ratkaisuja niille, joilta Jumala on riistänyt.

Ja niin, on olemassa kaksi tunnetuinta ja käytetyintä menetelmää tee rajasäteen rajat ylittävä selain. Ensimmäinen on Curved-corner, joka käyttää VML ja käyttäytyminen. Toinen on CSS3 PIE, jolla on kaksi toteutusta. Toinen perustuu myös VML:ään ja käyttäytymiseen, toinen on JavaScript-kirjasto.

Harkitse molempia ratkaisuja.

Kaareva kulma

Löysin vain yhden edun - mukana toimitetun border-radius.htc-tiedoston kevyen painon. Nykyinen versio toteutus vie vain 5 kt. PIE:tä vastaan, joka painaa 33 kb, tämä on varmasti merkittävä etu. Mutta siihen positiiviset asiat loppuvat, ainakin minulle.

Haittoja on paljon. Esimerkiksi seuraava rakenne ei toimi:

#valitsin ( reunus: #c6c5c2 1px kiinteä; border-top: ei mitään; reunuksen säde: 0 0 6px 6px; tausta: #f0ecdf; käyttäytyminen: url(border-radius.htc); )

Ensinnäkin, et voi poistaa kehystä yhdeltä sivulta. Toisin sanoen border-top-parametri lisää reunuksen koko lohkoon, vaikka kulmat pysyvät pyöristetyinä. Hassua, mutta border-bottom-parametri jättää kehyksen paikoilleen, mutta ei anna mitään vaikutusta, eli raja pysyy koko lohkon ympärillä.

Toiseksi, jos sinun tarvitsee leikata vain kaksi kulmaa, kuten esimerkissä, tulet pettymään. Kaareva kulma ei voi tehdä sitä. Se voi pyöristää vain lohkon kaikkia kulmia ja samalla sädearvolla. Kulmia, joilla on eri kaarevuussäteet, ei voida saavuttaa. Oikea ja toimiva versio näyttää tältä:

#valitsin ( reunus: #c6c5c2 1px solid; border-radius: 6px; käyttäytyminen: url(border-radius.htc); )

Kolmanneksi Curved-corner ei toimi lohkoille, joiden taustana on kuva.

No, viimeinen epämiellyttävä hetki on työn nopeus. Kulmia ei pyöristetä heti. Sivun latautumisesta kuluu noin sekunti, kunnes kulmat saavat halutun muodon. Visuaalisesti viive on hyvin havaittavissa ja selvästi havaittavissa.

Oli joitain muita ongelmia (lue yksityiskohdat), mutta en nyt muista.

Yhteenvetona voimme sanoa, että tämä korjaus sopii vain hyvin yksinkertaisiin tehtäviin. Vaikka, kuten käytäntö osoittaa, sellainen yksinkertaisia ​​tehtäviä törmää harvoin.

CSS3 PIE

Se painaa paljon, et voi sanoa mitään. Version PIE 1.0 beta 4 kestää 33 kt, sekä .htc-toteutuksessa että js-analogissa. Mutta samaan aikaan CSS3 PIE:llä ei ole kaikkia niitä reunasäteen ongelmia, joita Curved-cornerilla on. Pidän myös todella kyvystä käyttää JS-toteutusta, joka ei vaadi lisäkoodi CSS:ssä ja voi kytkeytyä mihin tahansa valitsimeen (jossa jQueryn avulla, Esimerkiksi).

CSS3 PIE:ssä on myös viive renderöinnissa (joskus ei), mutta se on huomattavasti pienempi kuin Curved-cornerin tapauksessa. Se on lähes näkymätön, mikä tekee kirjastosta erittäin houkuttelevan ja käyttökelpoisen.

Hienoa on, että CSS3 PIE korjaa ongelman paitsi raja-säde, mutta lisää myös huomattavan määrän CSS3-ominaisuuksia Microsoftin selaimiin. Näin toimivat esimerkiksi border-image ja box-shadow, liukuvärien kanssa työskentelyn ominaisuudet. Ongelmaa ollaan ratkaisemassa png läpinäkyvyys ja paljon enemmän. Kaikki tämä tunnetusti kompensoi ja selittää CSS3 PIE:n koon.

Silti kärpänen

Valitettavasti kumpikaan CSS3 PIE tai Curved-corner eivät pysty tukkimaan kaikkia halkeamia. Joten esimerkiksi et saa pyöristettyjä kulmia niille elementeille, jotka on alun perin piilotettu - niissä on näyttö: none parametri. Samoin näkyvän parametrin ja sen piilotetun arvon kanssa. Ongelmia voi syntyä, jos elementti on sijoitettu ehdottomasti. Voi, anna Yksityiskohtainen kuvaus En osaa kuvailla tilannetta, koska en pystynyt toistamaan olosuhteita, joissa ongelmia ilmeni, mutta muistan, että ongelmia oli varmasti.

On vielä yksi saalis, jonka tiedän. Reunussäteen käyttäminen elementille, kun hiiri vie sen päälle, seuraavasti:

A:hover ( tausta: #ccc; väri: #000; reunus: #ccc 1px kiinteä; reunan säde: 6px )

On välttämätöntä, että tällä elementillä on aluksi pyöristetyt kulmat, muuten vaikutusta ei ole. Eli sisään tässä esimerkissä, siellä pitäisi olla valitsin A, jolla on myös raja-säde ja reuna määritetty:

A ( tausta: #fff; väri: #000; reunus: #fff 1px kiinteä; reunuksen säde: 6px ) a:hover ( tausta: #cc; väri: #000; reunus: #ccc 1px kiinteä; reunan säde: 6px)

Tulokset

Itselleni ehdoton suosikkini on CSS3 PIE. Se todella tekee tehtävänsä ja tekee sen hyvin. Lisäksi kirjasto kehittyy. Tätä kehitystä seuraa säännöllinen uusien versioiden julkaiseminen, mikä on erittäin rohkaisevaa.

). Tämä tehdään käyttämällä CSS border-radius -ominaisuutta. Tässä artikkelissa tarkastellaan kaikkia eri vaihtoehtoja.

CSS:n raja-säteen syntaksi on:

rajan säde : [ fileen_arvo];

Kulmien pyöristäminen HTML:ssä CSS:n avulla

Katsotaanpa esimerkkejä kulmien pyöristämisestä CSS:n avulla. Esimerkiksi

В этом случае все 4 края элемента будут скруглены по 30px.

Значение скругления означает то, какой радиус окружности должен быть в уголке.

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

border-radius : 10px 7px 0px 0px ;

Последовательность этих цифр следующая:

• Верхний левый угол (в примере это 10px)
• Верхний правый угол (в примере это 7px)
• Нижний правый угол (в примере это 0px)
• Нижний левый угол (в примере это 0px)

Например

Результат:

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол

Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

Результат:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

border-radius : 100px / 200px ;

Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :

border : [толщина ] [тип_линии ] [цвет ];

Например:

border : 1px solid #00ff00 ;

• Толщина - задается чаще всего в пикселях
• Тип линии может принимать значения:
  • solid (сплошной)
  • dashed (пунктирный)
  • dotted (ряд точек)
  • groove (линия бороздка)
  • inset (вдавленная линия)
  • outset (выдавленная линия)
• Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)

Приведем пример

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

box-shadow : 0px 0px 4px 2px #a0b ;

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).

Например

Результат:

Мы приводили всегда в качестве примеров тег

. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :

-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;

CSS свойства

Определение и применение

CSS свойство border-radius позволяет определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:

Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip .

1. Скругление углов отсутствует. Значение по умолчанию 0 (ноль).
2. Скругление углов (по типу дуги окружности ). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em, cm и т.д.) и определяют r adius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый). Если bottom-left (нижний левый) опущен, то он такой же, как top-right (верхний правый угол). Если bottom-right (нижний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Если top-right (верхний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Допускается указывать значения в процентах.
3. Скругление углов (по типу дуги эллипса) . Значения указываются в единицах измерения CSS (px, em, cm и т.д.). Порядок указания значений следующий (нижнее изображение): задаются значение /-я (от одного до четырёх) h orisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) v ertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.

Поддержка браузерами

Свойство			Opera		IExplorer	Edge
border-radius	5.0 4.0 -webkit-	4.0 3.0 -moz-	10.5	5.0 3.1 -webkit-	9.0	12.0

CSS синтаксис:

border-radius: "1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit" ; /* Радиус применяется ко всем четырем углам (по типу дуги окружности) */ border-radius : 15px; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 15px 35%; /* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 14px 18px 50%; /* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 22% 11px 14px 15px; /
вертикальный радиус - значение применяется ко всем четырем углам */ border-radius : 15px 15% / 15px; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 10px 15% / 10px 40px; /* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /
вертикальный радиус - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 20px 15px 6em / 20px 25px 30%; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 15px 15% / 10px 15em 15px 5em;

JavaScript синтаксис:

Object.style.borderRadius = "5px"

Значения свойства

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

luokka = "oranssi" > 50 kuvapistettä

50px 25%

25px 75% / 4em

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:

Div-lohko, jossa on 3px reunus punaisella.

Voit määrittää reunatyylin vain elementin toiselle puolelle. Käytä tätä varten ominaisuuksia border-top (yläreuna), border-right (oikea reuna), border-bottom (alareuna), border-left (vasen reuna).

Div eri reunoilla.

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

Mieti kuinka CSS-apua voit luoda seuraavanlaisen muodon:

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 hyväksytään 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 reunuksen 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ä.

Avulla rajatyylisiä ominaisuuksia Reunuksen tyyliä 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:

Yksi arvo (2px) - reunan paksuus asetetaan lohkon kaikille sivuille.

Kaksi arvoa (1px 5px) - ensimmäinen arvo asettaa paksuuden ylä- ja alapuolelle, toinen sivulle.

Kolme arvoa (1px 3px 5px) - ensimmäinen arvo yläpuolelle, toinen sivuille, kolmas alapuolelle.

Neljä arvoa (1px 3px 5px 7px) - jokainen arvo yhdelle puolelle myötäpäivään alkaen ylhäältä.

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ä reunavärityökalulla. 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ä:

Tässä esimerkissä div-lohko Ensinnäkin reunat asetetaan 3 kuvapisteen paksuisiksi ja kiinteä tyyli kaikille puolille. Sitten:

• yläreunan väri määriteltiin uudelleen punaiseksi käyttämällä border-top-color -ominaisuutta,
• käyttämällä border-right-width -ominaisuutta oikean reunan paksuudeksi asetetaan 10 kuvapistettä,
• käyttämällä border-bottom-style-ominaisuutta, alareunuksen tyyli määritellään uudelleen kaksoisreunukseksi,
• Käyttämällä border-left-color -ominaisuutta vasemman reunan väriksi on asetettu sininen.

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 pyöristetystä lohkosta ilman reunaa, mutta taustavärillä:

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 huolellisesti tätä taulukkoa, 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: 30 kuvapistettä tasavalkoinen; reuna-ala-väri: punainen;