Html pyöristää pöydän kulmat. Border-radius: pyöristetyt kulmat CSS:ssä

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

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

Закругленные углы в CSS можно сделать многими способами, очень многими, причем некоторые из них можно считать уже устаревшими, так как в CSS 3 появились новые свойства, позволяющие закруглять углы у HTML-элементов. Однако, во-первых, старые браузеры не поддерживают эти свойства, а во-вторых, в креативном мозгу дизайнера порой рождаются такие идеи, что только старые способы и спасают. Поэтому здесь мы рассмотрим несколько различных вариантов позволяющих сверстать закругленные углы в CSS: от самых простых - до довольно сложных.

В данных примерах углы закругляются у изначально блочных элементов, также в некоторых примерах эти блоки задействуются в качестве вспомогательных элементов. Но помните, что вы с легкостью можете проделать то же самое и с элементами уровня строки, предварительно задав им со значением block или inline-block, если это необходимо.

Закругленные углы в CSS 3 без изображений

В этом примере используются свойства из CSS 3, которые позволяют без проблем закруглять углы без помощи изображений.

Пример HTML и CSS: закругление углов с помощью CSS 3 без изображений

Esimerkin kuvaus

1. Kulmien pyöristämiseen käytämme CSS 3 -ominaisuutta, jonka kaikki nykyaikaiset selaimet ymmärtävät.
2. Vanhemmissa selaimissa Firefox, Chrome ja Safari käytämme erikoisominaisuuksia etuliitteillä -moz- ja -webkit-, jotka ilmestyivät ennen kuin pääominaisuutta tuettiin. Valitettavasti vanhoille Operalle ja IE:lle ei ole vastaavia analogeja. Huomaa, että kun luot monimutkaisia ​​käyriä, etuliitteitä sisältävät ominaisuudet eivät välttämättä toimi oikein. Siksi CSS-koodissa ne listattiin pääominaisuutta korkeammalle, joten sen mukaan tyylien prioriteetit, selaimet, jotka jo ymmärtävät sanan "puhdas", käyttivät sitä.

Ominaisuudet, joissa on etuliitteitä, eivät ole CSS-määrityksessä, joten niiden käyttö johtaa virheelliseen koodiin.

Pyöristetyt kulmat CSS:ssä ilman kuvia

Tässä esimerkissä ei myöskään ole kuvia, vaan siinä käytetään lisälohkoja. Menetelmän ydin on, että ennen pääsisältöä ja sen jälkeen näytetään useita lohkoja, jotka siirtyessään siitä pois, pienentävät vähitellen leveyttä käyttämällä sivusuunnassa ulkoisia marginaaleja. Tämän ansiosta tapahtuu pyöristettyjen kulmien jäljitelmä.

Tämä menetelmä on huono, koska koodi on "täynnä" lisälohkoilla, mutta valitettavasti monissa esimerkeissä tällaisia ​​lohkoja on. Toinen haittapuoli on, että suurilla kaarevuussäteillä joudut lisäämään vielä enemmän lohkoja kuin mitä esimerkissä käytetään.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen ilman kuvia

Esimerkin kuvaus

1. Lohkon sisällä class = "block" osoitamme pääsisällön elementin ("content_block"), jonka eteen asetamme lohkoja simuloimaan kulmien pyöristämistä ("b1" , "b2" , "b3" ). Sen jälkeen laitamme ne samaan, mutta päinvastaisessa järjestyksessä.
2. Asetamme simulaatiolohkot vaaditulle korkeudelle ja sivumarginaalille (CSS) luodaksemme kulmien ilmeen. Nollasimme myös niiden fonttikoon (CSS) ja asetamme sen arvoon :hidden - tämä on tarkoitettu vanhemmille selaimille, jotka voivat nostaa korkeutta ja tehdä siitä määritettyä suuremman.
3. Tässä esimerkissä kulmien pyöristyksen lisäksi lisättiin myös kehyksen jäljitelmä, jos et tarvitse sitä, poista elementeistä kaikki reunat ja poista taustaväri "b3":sta; lohko.

Helpoin tapa saada pyöristetyt kulmat näkyviin CSS:ssä on käyttää kuvaa elementin taustana. Tässä tapauksessa elementin mitat määritetään yleensä samaksi kuin taustakuvan koko. Tämän menetelmän haittana on, että elementin sisältö ei saisi ulottua sen laajuuden ulkopuolelle, eli sen tulee olla tietyn rajallinen koko.

HTML- ja CSS-esimerkki: Kulmien pyöristys yhdellä kuvalla

Esimerkin kuvaus

1. CSS-ominaisuuden avulla asetamme lohkolle taustakuvan, jota emme toista pysty- ja vaakasuunnassa (ei toistoa), koska tässä tapauksessa tätä ei vaadita.
2. Jotta lohkon sisällä oleva teksti ei koskettaisi sen reunoja, asetimme sen täytteeksi (CSS) 5 kuvapistettä kummallekin puolelle.
3. Seuraavaksi sinun on asetettava lohko samaan mittaan kuin tausta. Taustakuvamme mitat ovat 140 x 32 pikseliä, mutta määritämme itse lohkon leveyden (CSS) ja korkeuden (CSS), pienennettynä 10 pikselillä. Jouduin pienentämään sitä samojen sisäisten pehmusteiden takia, jotka myös laajentavat elementtiä 5px kumpaankin suuntaan.

Edellisessä esimerkissä lohkon koko oli kiinteä ja riippui taustakuvan koosta, mikä on erittäin hankalaa. Nyt teemme lohkomme leveydestä muutettavan. Voit tehdä tämän leikkaamalla kuvan kolme osaa - sivut ja pala keskustasta. Sitten sijoitamme kaksi kiinteäkokoista elementtiä päälohkon sisään, jotka absoluuttisen sijoituksen ansiosta sijoitetaan sen sivuille. Annetaan heille samat sivuosat kuin tausta ja keskiosa päälohkolle. Tämä antaa meille lohkon, jossa on pyöristetyt kulmat ja vaihteleva leveys.

Tätä tekniikkaa käytetään hyvin usein yksirivisten elementtien, kuten linkkien tai osien/valikon otsikoiden, pyöristämiseen.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen sivulohkoilla

Esimerkin kuvaus

1. Lohkon luokka = "block" sisällä sijoitamme kaksi elementtiä - "left_bok" ja "right_bok", joille asetamme sivuosien kuvat taustaksi (CSS) ja estämme niiden toiston (no-repeat). Itse päälohkolle asetamme taustan keskiosasta ja sallimme sen kopioinnin vain vaakasuunnassa (toista-x).
2. Määritämme sivulohkoille taustan kokoa vastaavan leveyden, se on meille 14x32 pikseliä. Mutta päälohkolle, kuten edellisessä esimerkissä, asetimme korkeudeksi 22 pikseliä pystysuoran pehmusteen kompensoimiseksi.
3. Sijoitamme sivuseinämme suhteessa "lohkoon", joten määritämme sille :relativen ja itse sivuseinille absoluuttisen. No, sitten painamme ne ylätason vastaaville puolille käyttämällä CSS-ominaisuuksia , ja .
4. Jotta lohkon sisältö ei piiloutuisi sivukuvien alle, asetamme "lohkon" sivupehmusteeksi (CSS), joka voi olla yhtä suuri tai hieman suurempi kuin itse sivut. Asetamme myös pienet marginaalit ylä- ja alaosaan, jotta teksti ei "tartu" reunoihin.

IE6:ssa on pieni virhe tässä menetelmässä:

Jos "lohkon" leveys tai korkeus on pariton, lohkon sisäreunan ja oikealle sijoitetun sivupalkin väliin ilmestyy epämiellyttävä 1px:n sisennys, joka pilaa koko kuvan. Tämä bugi voidaan korjata käyttämällä CSS-hakkerointi tietyllä ilmaisulla, mutta en edes anna tällaista esimerkkiä tässä, koska se usein jäädyttää selaimen ja on parempi olla käyttämättä sitä.

Tehdään se toisin. Asetetaan "right_bok" -vasemman marginaalin (CSS) arvoksi 100 %, jotta se siirtyy päälohkon oikean reunan yli, ja palautetaan se sitten takaisin siirtämällä sitä vasemmalle sen leveyden verran pikselien verran. IE6 toimii oikein näiden ominaisuuksien arvojen kanssa, joten sillä ei ole muuta vaihtoehtoa kuin sijoittaa lohko sinne, missä sitä tarvitsemme.

Tämä kulmien pyöristysmenetelmä on samanlainen kuin edellinen, mutta toisin kuin se, tässä sivuille ei sijoiteta HTML-elementtejä, vaan päälohkoon lisättyjä pseudo-elementtejä. Tämän lähestymistavan ansiosta oli mahdollista päästä eroon sivun tarpeettomasta HTML-koodista.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen käyttämällä sivupseudoelementtejä

Esimerkin kuvaus

1. CSS-pseudoelementeillä osoitamme, että haluamme lisätä jotain päälohkon alkuun ja loppuun. Ja CSS-ominaisuuden avulla lisäämme vain tarvittavat kuvat pyöristetyistä kulmista tai pikemminkin sivuista. Joten loimme kaksi pseudoelementtiä kuvilla.
2. No, sitten teemme täsmälleen saman asian kuin edellisessä esimerkissä, vain työskentelemme luotujen pseudoelementtien kanssa.

IE6:lle ja IE7:lle tässä esimerkissä käytettiin seuraavia "sauvoja":

1. Kuten tiedät, IE6 ja IE7 eivät ymmärrä tässä käytettyjä pseudoelementtejä, joten toimimme seuraavasti. Käytämme lauseketta, joka yhdistää kaksi tagia pääelementin sisään ja annamme niille samat tyylit kuin edellisessä esimerkissä. Huomaa, että syötetty koodi, joka tulee ensimmäisen innerHTML-koodin jälkeen, lisätään välittömästi avaavan "block"-tunnisteen jälkeen ja toisen innerHTML-koodin jälkeen ennen sulkevaa tagia. Kyllä, meidän tapauksessamme tällä ei ole merkitystä, koska absoluuttista paikannusta käytetään, mutta joskus on hyödyllistä tietää siitä.
2. Liitämme sen sisään, jotta muut selaimet eivät näe tätä koodia ehdolliset kommentit. Olisi parempi, jos laittaisit sen erilliseen CSS-tiedostoon, joka on yhdistetty samoilla kommenteilla suljetulla tagilla.

Pyöristetyt kulmat CSS:ssä käyttämällä lohkokäärettä

Tämän menetelmän ydin on, että ensin leikataan kuvan kulmat. Sitten päälohkon sisään sijoitetaan useita muita lohkoja (kulmien lukumäärän mukaan), jotka ovat sisäkkäin toistensa sisällä. Jokaiselle niistä annetaan yksi kuvakulma taustaksi. Kuvien kopioiminen on kielletty ja koordinaatit annetaan siten, että ne sijoittuvat lohkojen kulmiin. Näin saadaan pyöristetyt kulmat.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen Block Wrap -toiminnolla

Esimerkin kuvaus

1. Asetamme neljä muuta päälohkon sisään. Koska millään näistä lohkoista ei ole reunuksia tai reunuksia ja vain sisimmässä on sisennykset, ne ovat kaikki yhtä korkeita ja leveitä.
2. CSS-ominaisuuden avulla asetamme jokaisen sisemmän lohkon kulmaan taustaksi, estämme niitä toistamasta ja sijoitamme ne lohkojen kulmiin. Ja koska elementtien taustaväri on läpinäkyvä, kaikki neljä taustakulmaa näkyvät sivulla.
3. Lisää haluttu taustaväri ulompaan lohkoon kulmalla. Kaikki on valmista.

Voit määrittää lohkon leveyden nimenomaisesti määrittämällä haluamasi ominaisuuden kohdassa class="block" , mutta korkeuden muuttamiseksi on käytettävä sisin elementtiä (meille se on "rb").

Pyöristetyt kulmat CSS:ssä paikannuksella

Myös tässä taustalle on leikattu kulmat, jotka ilmoitetaan pienissä lohkoissa. CSS-absoluuttista paikannusta käyttämällä nämä lohkot sijoitetaan pääelementin kulmiin, jolle annetaan haluttu taustaväri.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen paikannuksella

Esimerkin kuvaus

1. Pääelementin (class= "block") sisään laitamme neljä tagia luokilla "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , jotka toimivat kulmalohkoina.
2. CSS-ominaisuuden avulla yhdistämme jokaiseen kulmalohkoon oman taustakuvamme ja asetamme niiden leveyden ja korkeuden vastaamaan näitä taustakuvia. Varmuuden vuoksi nollaamme fontin koon (CSS) ja leikkaamme ylimääräisen pois (CSS).
3. Määritämme suhteellisen sijainnin pääelementille (CSS:relative), koska asetamme kulmalohkot sen suhteen ja itse kulmat - absoluuttinen (absoluuttinen).
4. Käyttämällä CSS-ominaisuuksia , ja , määritämme pysty- ja vaakasuuntaiset siirtymäetäisyydet kulmalohkoille siten, että ne sijaitsevat päälohkon kulmissa.

Tässä menetelmässä on pari ongelmaa IE6:ssa:

1. Jos "lohkon" leveyttä ei ole erikseen määritelty, vasemmanpuoleiset kulmat eivät loksahda paikoilleen. Syynä tähän on sisäinen pehmuste lohkossa. Helpoin tapa korjata ongelma on poistaa sisennys ja sulkea "lohkon" pääsisältö (ilman kulmia) lisälohkokääreeseen ja määrittää sitten tarvittava sisennys kääreeseen. Mutta tein sen tässä toisin ottamalla käyttöön asettelun käyttämällä zoom:1-ominaisuutta, joka käskee IE6:ta näyttämään elementin luonnollisessa koossa. Tämä ominaisuus on virheellinen, joten jos päätät käyttää sitä, suosittelen, että muodostat yhteyden kautta ehdolliset kommentit.
2. Sama yhden pikselin virhe, josta keskusteltiin edellä. Mutta tässä rakot voivat muodostua paitsi lohkon oikeiden kulmien ja oikean puolen väliin, myös alaosaan. Ja jos pääsimme eroon oikeanpuoleisista aukoista, tämä ei toimi alimmilla. Ratkaisu on määrittää pääelementin tasainen leveys ja korkeus. Voit myös asettaa parittomat arvot, mutta silloin sinun on asetettava alaspäin ja oikealle siirtymäetäisyydet, jotka eivät ole nolla, vaan -1px.

Pohjimmiltaan tämän kulmien pyöristysmenetelmän tekniikka CSS:ssä on sama kuin edellinen, joten yksityiskohtaiset kommentit jätetään tässä pois. Ainoa ero on, että erillisten taustakulmakuvien sijaan käytetään yhtä yhteistä sprite-kuvaa. Tämän ansiosta sivusto latautuu nopeammin, koska yksi kuva "painoa" vähemmän kuin neljä ja isännöinti valitus on yksi neljän sijasta.

Sprite on kuva, joka yhdistää useita verkkosivuston elementtien taustana käytettyjä kuvia. Se, mikä spriten osa on tietyn HTML-elementin tausta, riippuu erityisessä CSS-ominaisuudessa määritetyistä koordinaateista.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen paikannuksella ja spriteillä

Esimerkin kuvaus

1. Yhdistämme CSS-ominaisuuden avulla kulmalohkoihin taustasprite-kuvan, joka on pyöreän muotoinen ja sen mitat ovat 22x22 pikseliä (11x11 pikseliä jokaisessa neljänneskulmassa).
2. CSS-ominaisuuden avulla määritämme taustasiirtymän koordinaatit. Esimerkiksi arvo -11px 0 tarkoittaa, että tausta on siirtynyt vasemmalle 11px X-akselilla, mutta ei siirtynyt Y-akselilla. Siten spriten vasen puolisko ylittää elementin rajan ja vain oikea jää jäljelle. Mutta se on vain puoliksi näkyvissä, koska sen korkeus on 22px ja itse kulmalohkon korkeus on vain 11px. Joten käy ilmi, että tällä arvolla elementin tausta on spriten oikea yläneljännes.

IE6:ssa on samat ongelmat kuin edellisessä esimerkissä.

Tässä esimerkissä pyöristetään reunuksella varustetun elementin kulmat, mutta tämä ei ole tämän menetelmän erityispiirre - voit helposti käyttää pyöristystä reunuksella aiemmissa esimerkeissä.

Teemme pyöristykset itse käyttämällä pseudoelementtejä, jotka on luotu päälohkosta, mutta soveltamatta niihin paikannusta.

Ja yksi hetki. Edellisissä esimerkeissä kulmat leikattiin pois sisäpuolen taustan mukana, eikä tämä aina ole välttämätöntä, varsinkin jos pyöristetyn kulman lohkon taustan odotetaan olevan epätasainen. Siksi kehyksen sisällä oleva tausta tehtiin läpinäkyväksi (PNG-formaatti sallii tämän) ja kun kulmat leikattiin, myös niiden sisäpuoli muuttui läpinäkyväksi. Tarvittaessa voit myös käyttää samanlaista lähestymistapaa edellisissä esimerkeissä.

HTML- ja CSS-esimerkki: Kulmien pyöristäminen pseudoelementeillä

tausta , ja sen avulla asetamme ne oikealle puolelle ja kiellämme "lisääntymisen". Siinä kaikki, kulmat ovat valmiit.

IE6:lle ja IE7:lle käytimme täällä jo tuttuja "sauvoja" HTML-koodin injektoinnissa, koska nämä selaimet eivät ymmärrä tässä käytettyjä pseudoelementtejä:

1. Lausekkeen avulla integroimme pääelementin sisään kaksi tagia, jotka myös muunnetaan lohkoiksi. Sitten laitamme niihin yhden tagin. Ja sitten näillä tunnisteilla on samat ominaisuudet kuin pseudoelementeillä. Ainoa asia on, että lisäämme lisäksi CSS-ominaisuuden :relative, jota ilman kehys menee päällekkäin kulmien kanssa.

Tämän menetelmän haittana on, että pyöristetyillä kulmilla varustetun lohkon korkeutta ei voi erikseen asettaa, koska jos se ylittää sisällön koon, alakulmat eivät puristu reunoja vasten. Tämä voidaan välttää, jos sisällytät pääsisällön toiseen lohkoon ja asetat sen korkeuden.

Toinen esimerkki kulmien pyöristämisestä pseudoelementeillä ja ilman lisälohkoja

Tämä esimerkki on samanlainen kuin edellinen, mutta tässä käytämme paikannusta pseudoelementtien järjestämiseen. Tämän lähestymistavan ansiosta tuli mahdolliseksi määritellä selkeästi pyöristetyillä kulmilla varustetun lohkon korkeus.

HTML- ja CSS-esimerkki: Pyöristetyt kulmat, joissa voit muuttaa lohkon korkeutta

Ja jälleen, IE6:lle ja IE7:lle lisäämme useita lisäelementtejä päälohkon sisään lausekkeen avulla ja suljemme koodin ehdollisissa kommenteissa. Vain tällä kertaa emme edes yritä jäljitellä pseudoelementtejä, vaan teemme sen yksinkertaisemmin.

1. Lisäämme neljä tagia "lohkon" sisään ja kohdistamme niihin. Ja sitten näytämme heille vain kuvan kulmat taustana ja asetamme ne pääelementin kulmiin. Toisin sanoen toimimme täsmälleen kuten yhdessä edellä käsitellyistä menetelmistä.
2. Voit päästä eroon yhden pikselin virheestä (joka mainittiin useammin kuin kerran yllä) lisäämällä oikean kulman elementteihin vasen marginaali (CSS), jonka arvo on 100 % ja negatiivinen offset, joka on -9px. Yleensä, jos muistat, tämän siirtymän tulisi olla yhtä suuri kuin kulmalohkon leveys (meille se on 11px), mutta älä unohda täällä olevaa 2px-reunaa - meidän on asetettava kulmat sen päälle. (11px-2px=9px).

Muuten, itse asiassa olisi helpompi emuloida pseudoelementtejä, kuten teimme edellisessä esimerkissä - näin lisäkoodia olisi vähemmän. Mutta ei IE6:ssa, tämä selain tarvitsisi useita lisää "sauvoja" ja sen seurauksena sen pitäisi kirjoittaa kaksi erillistä ehdolliset kommentit- IE6:lle ja IE7:lle, ja tämä vain paisuttaisi koodia...

Firefoxissa tämä menetelmä toimii oikein versiosta 3.6 alkaen, ja Operassa - versiosta 10.0 alkaen, en keksinyt heille kainalosauvoja, koska tällä ei ole juurikaan merkitystä.

Tervehdys, ystävät. Tämä artikkeli on omistettu melko suositulle aiheelle aloittelevien verkkovastaavien keskuudessa - pyöristetyt kulmat CSS. Kysymykset, joita yritän käsitellä, ovat se, kuinka verkkosivuston elementtien kulmat pyöristetään käyttämällä vain CSS:ää ilman kuvien käyttöä.

Tällä menetelmällä on sekä hyviä että huonoja puolia. Etuna on tietysti se, että kuvia ei tarvitse luoda millään grafiikkaeditorilla, ladata niitä palvelimelle ja sitten järjestää CSS:n avulla tarvittaviin paikkoihin halutun efektin luomiseksi. Tässä tapauksessa on tarpeen luoda lisäelementtejä HTML-koodiin sekä määrittää jokaiselle niistä erilliset ominaisuudet.

Mitä tulee miinuksiin, tässä voidaan huomata yksi ongelma - kaikki verkkoselaimet eivät tue tätä ominaisuutta, etenkään eri selainten vanhentuneiden versioiden kohdalla.

Kulmien pyöristäminen CSS:llä on kuitenkin tulossa yhä suositummaksi. Kuten ehkä jo ymmärsit, tässä artikkelissa käytämme CSS 3:ssa saatavilla olevaa ominaisuutta.

Pyöristetyt kulmat CSS:llä.

Joten esimerkiksi otamme lohkon DIV-elementin ja pyöristetään sen kulmat. Luodaan esimerkiksi lohko ja määritetään sille ominaisuudet suoraan HTML-koodissa style-attribuutin avulla. Ensin meillä on lohkoelementti, joka on täytetty minkä tahansa värisellä taustalla:

Muuten, jos sinun on selvitettävä, mikä värikoodi sinulla on verkkosivustollasi tai millä tahansa muulla verkkosivustolla, tämä on hyödyllinen.

Ja näin näemme sen verkkoselaimessa:

Nyt käytämme kulmien pyöristämiseen "border-radius" -ominaisuutta, joka voidaan kääntää rajan säteeksi. Kyllä, juuri niin, eikä niin monet luulisi, että tämä on kehyksen säde tai miksi he sitä kutsuvatkin (reuna). Tämä ominaisuus vastaa nimenomaan elementin rajojen säteestä, ei sen kehyksistä tai reunoista, joita ei ehkä ole olemassa. Ominaisuus toimii kuitenkin edelleen ilman reunusta elementissä. Toivottavasti ymmärsit mitä halusin sanoa. Tämän ominaisuuden arvo on mikä tahansa numeerinen arvo, jota voidaan käyttää CSS:ssä, kuten prosentit, pikselit (px), pisteet (pt) ja niin edelleen. Kyllä, ja on otettava huomioon, että tämä ominaisuus toimii elementin kaikissa neljässä kulmassa kerralla, lisäksi voit määrittää kullekin kulmaan eri säteen, mutta siitä lisää myöhemmin. Ensin asetetaan suorakulmiomme kulmien säde. Olkoon se yhtä suuri kuin 5 pikseliä:

Sitten elementti näyttää tältä:

Nyt ehdotan, että mietitään, kuinka voit lisätä oman säteen kullekin kulmille erikseen. Tätä varten voimme käyttää ominaisuutta, jota voidaan soveltaa jokaiseen kulmaan erikseen. Jos puhumme edellisestä esimerkistä, elementin ominaisuudet näyttäisivät kokonaisuudessaan tältä:

Reunus-ylä-vasen-säde: 5px; /* vasen yläkulma */ border-top-right-radius:5px; /* oikea yläkulma */ border-bottom-right-radius:5px; /* oikea alakulma */ border-bottom-left-radius:5px; /* vasen alakulma */

Eli jos haluamme asettaa jokaisen kulman omaan arvoonsa, meillä on tämä mahdollisuus, ja varmistaaksemme tämän otamme seuraavan koodin:

Ja sitten saamme tämän tuloksen:

Kuten näemme, kunkin kulman reunalla on oma sädearvonsa.
Lisäksi CSS:n avulla voimme asettaa arvon kunkin kulman reunalle lyhyenä merkintänä, joka näyttää tältä:

Missä arvot seuraavat tässä järjestyksessä:

Reunuksen säde: 5px /* vasen yläkulma */ 10px /* oikea yläkulma */ 15px /* oikea alakulma */ 20px /* vasen alakulma */;

Näin ollen yllä olevan perusteella käy selväksi, että samalla tavalla voimme asettaa säderajan vain kolmelle (yhdelle tai kahdelle) kulmille:

Tältä se näyttää verkkoselaimessa:

Jos et ole vielä täysin hämmentynyt, niin jatketaan. Tosiasia on, että kunkin kulman rajan säde voidaan määrittää ei yhdessä arvossa, kuten edellä keskustelimme, vaan kahdessa. Eli kaksi arvoa kullekin kulmille. Tässä tapauksessa ensimmäinen arvo asettaa kulman säteen vaakasuoraan ja toinen arvo asettaa säteen pystysuoraan. Aloitetaan ensin yhdestä kulmasta:

Tässä esimerkissä vaikutimme vain elementin vasempaan yläkulmaan:

Jos käännät arvot, elementti näyttää tältä:

Tuntuu, että se olisi voinut päättyä tähän, mutta ei. On vielä yksi temppu. Ominaisuuden arvossa voimme käyttää arvojen välissä kauttaviivaa (/). Kenoviiva voi auttaa meitä yhdistämään arvoja muihin arvoihin. Yleensä on helpompi näyttää kuin kertoa. Aloitetaan jostain yksinkertaisesta. Oletetaan, että vaakasuuntaisen säteen tulee olla 35 pikseliä ja pystysäteen 5. Lisäksi näiden arvojen tulee koskea kaikkia kulmia. Sitten voimme kirjoittaa näin:

Ja saat tämän tuloksen:

Katsotaanpa nyt monimutkaisempaa esimerkkiä:

Tässä tapauksessa vinoviivaa (/) edeltävä arvo liittyy kulman vaakasuoraan säteeseen ja merkin jälkeen pystysuoraan. Tässä tapauksessa arvot liittyvät toisiinsa seuraavasti:

Reunus-ylävasen-säde: 20px 15px; reunus-ylä-oikea-säde: 10px 25px; reunus-ala-oikea-säde: 40px 15px; reunus-ala-vasen-säde: 10px 25px;

Ja lopputulos tulee olemaan tämä:

Ja artikkelin lopussa puhumme tämän ominaisuuden tuesta eri selaimissa.

Kulmien pyöristäminen eri selaimissa.

Tässä on syytä huomata, että kaikki selainversiot eivät tue tätä ominaisuutta. Ominaisuutta tukevat IE9+, Firefox 4+, Chrome, Safari 5+ ja Opera.
Mutta joissakin selainversioissa, jotka eivät tue tätä ominaisuutta, on standardista poikkeavia ominaisuuksia, jotka lisäävät omaisuuteen niin sanotun etuliiteen tai etuliiteen.
Chrome ennen versiota 4.0, Safari ennen versiota 5.0, iOS käyttävät standardista poikkeavaa ominaisuutta -webkit-border-bottom-left-radius.
Firefox ennen versiota 4.0 käyttää standardista poikkeavaa ominaisuutta -moz-border-radius-bottomleft.
Tässä tapauksessa meidän on kopioitava ominaisuus käyttämällä näitä etuliitteitä. Jos esimerkiksi asetamme vasemman yläkulman reunukselle ominaisuuden arvoksi viisi pikseliä:

Reunus-ylävasen-säde: 5px;

Sitten ominaisuus, joka kopioi sen etuliitteillä, näyttää tältä:

Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; raja-ylä-vasen-säde: 5px;

Toivon todella, että pystyin selittämään kaiken selkeästi ja että ymmärrät nyt kuinka pyöristetyt kulmat vain CSS:llä.
Onnea sinulle!

Jokainen on jo pitkään kyllästynyt perinteisiin suorakaiteen muotoisiin kulmiin verkkosivujen suunnittelussa. Muodissa ovat pyöristetyt kulmat, joita ei tehdä kuvilla, vaan tyyleillä, joissa käytetään border-radius ominaisuutta. Tällä ominaisuudella voi olla yksi, kaksi, kolme tai neljä välilyönnillä erotettua arvoa, jotka määrittävät kaikkien kulmien säteen tai jokaisen erikseen.

Taulukossa 1 näyttää erilaisen määrän arvoja ja tässä tapauksessa saadun lohkotyypin.

Koodi	Kuvaus	Näytä
div (reunuksen säde: 10 pikseliä; )	Pyöristyssäde kaikille kulmille kerralla.
div (reunuksen säde: 0 10px; )	Ensimmäinen arvo määrittää vasemman ylä- ja oikean alakulman säteen, toinen arvo asettaa säteen oikealle yläkulmalle ja vasemmalle alareunalle.
div (reunuksen säde: 20px 10px 0;)	Ensimmäinen arvo asettaa vasemman yläkulman säteen, toinen - sekä oikeaan ylä- että alavasempaan ja kolmas arvo - oikeaan alakulmaan.
div (reunuksen säde: 20px 10px 5px 0;)	Asettaa peräkkäin vasemman yläkulman, oikean yläkulman, oikean alakulman ja vasemman alakulman säteen.

Esimerkki 1 näyttää kuinka luodaan lohko pyöristetyillä kulmilla.

Esimerkki 1. Lohkon kulmat

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Riisi. 1. Lohko pyöristetyillä kulmilla

Mielenkiintoinen vaikutus saadaan, jos asetat pyöristyssäteen suuremmiksi kuin puolet elementin korkeudesta ja leveydestä. Tässä tapauksessa saat ympyrän. Esimerkki 2 näyttää kuinka luodaan pyöreä painike, jossa on kuva.

Esimerkki 2: Pyöreä painike

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Riisi. 2. Pyöreä painike

Opera-selaimessa pyöristys arvoon käytetään väärin, jos rajaa ei ole määritetty rajaominaisuuden kautta.

Ominaisuutta border-radius voidaan yhdistää muihin ominaisuuksiin, esimerkiksi varjon lisäämiseen elementtiin. Esimerkissä 3 tehdään joukko ympyröitä, joista yksi on korostettu käyttämällä box-shadow -toimintoa. Tätä sarjaa voidaan käyttää sivuilla tai kuvissa selaamiseen.

Esimerkki 3. Hehku

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Riisi. 3. Hehku ympyrän ympäri

Reunasäteen avulla voit tehdä paitsi ympyrän myös ellipsin sekä elliptisen pyöristyksen lohkolle. Tätä varten sinun ei tarvitse kirjoittaa yhtä arvoa, vaan kaksi, erotettuna kauttaviivalla. Kirjoitus 20px/10px tarkoittaa, että fileen vaakasäde on 20 pikseliä ja pystysäde 10 pikseliä. Esimerkki 4 näyttää, kuinka luodaan elliptisiä kulmia sarjakuvatyylisen kuvatekstin lisäämiseksi valokuvaan.

Esimerkki 4: Ellipsit

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Olet oma opettajasi

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

Riisi. 4. Elliptisten kulmien käyttö

Voit myös muuttaa kuvien kulmien ulkoasua lisäämällä border-radius -ominaisuuden img-valitsimeen esimerkin 5 mukaisesti.

Esimerkki 5: Kuvat

HTML5 CSS3 IE 9+ Cr Op Sa Fx

CTRL+N tai valitse "Tiedosto"-valikon avattavasta luettelosta "Luo"-toiminto. Valitse seuraavaksi samasta luettelosta "Tuo"-toiminto tai kutsu se näppäinyhdistelmällä CTRL+I. Määritä seuraavaksi kuvatiedoston polku valintaikkunassa ja napsauta "Tuo" -painiketta. Omasi näytetään tässä.

Etsi työkalupalkista "Solmueditori" ja valitse "Muoto"-työkalu. Tämä työkalu voidaan avata myös painamalla F10-näppäintä.

Kulman oikealla puolella sinun on pyöristettävä, napsauta hiiren vasemmalla painikkeella kuvan reunaa. Kuvaan ilmestyy uusi solmu neljän kulman lisäksi. Valitse sitten Muunna viiva käyräksi -vaihtoehto Solmueditori-paneelista. Pyöreät merkit näkyvät juuri luodun solmun vasemmalla puolella.

Lisää samalla etäisyydellä kulmasta uusi solmu kuvan kohtisuoralle puolelle. Muuttamatta Muoto-työkalua kaksoisnapsauta pääkulmasolmua, se poistetaan. Kuvan pyöristetty kulma tulee heti havaittavaksi. Voit muuttaa kulman sädettä suoraviivaisten ohjainmerkkien avulla.

Hyvin yksinkertaisella tavalla (käyttämällä vektoriobjektia) voit tehdä kaiken kulmat suorakaiteen muotoisessa kuvassa. Käyttämättä yllä olevaa solmujen muokkausmenetelmää, piirrä tuodun kuvan viereen samankokoinen suorakulmio suorakulmiotyökalulla tai kutsu työkalu F6-näppäimellä.

Kun olet jo tuttu "Shape" -työkalu, napsauta suorakulmiota ja vedä hiiri minkä tahansa sen solmun päälle kohti suorakulmiota. Kulmat pyöristetään. Kaarevuussädettä voidaan säätää samalla työkalulla.
Merkitse kuvasi valintatyökalun nuolella.
Etsi seuraavaksi päävalikon luettelosta "Effects" -versio ja valitse "PowerClip" -vaihtoehto ja "Place Inside Container" -toiminto avattavasta luettelosta. Osoita leveällä nuolella suorakulmiota, jonka piirsit pyöristetyillä kulmilla. Siitä tulee kehys, johon kuvasi sijoitetaan.

Huomautus

Huomaa, että kuvan tuominen Corel Draw -asiakirjaan ei muuta alkuperäistä kuvatiedostoa, joten voit käyttää sitä alkuperäisessä muodossaan, jos et ole tyytyväinen pyöristetyn kulman tulokseen.

Hyödyllinen neuvo

PowerClip-toiminnon avulla voit sijoittaa kuvia erilaisiin omituisimman muotoisiin kehyksiin.

Lähteet:

• Corel Draw'n virallinen opas, M. Matthews, K. Matthews, 1997
• Kuinka tasoittaa terävät kulmat?

Tarvitset

• - tietokone
• - Adobe Photoshop -ohjelma
• - valokuva

Ohjeet

Napsauta hiiren kakkospainikkeella taustatasoa, valitse Kopioi kerros ja napsauta OK (tai Ctrl+J). Luo sitten uusi kerros (Ctrl+Shift+N), aseta se taustan ja sen kopion väliin kuvakaappauksen mukaisesti (voit täyttää sen jollain värillä, esimerkiksi valkoisella). Poista lukittu kerros käytöstä (napsauta "silmää" vasemmalla) tai poista se.

Etsi työkalupaletista suorakulmiopainike (Rectangle Tool) ja pidä sitä painettuna hiiren vasemmalla painikkeella. Lisävalikko tulee näkyviin sinne, missä sitä tarvitset (Pyöreä suorakulmio -työkalu). Aseta yläosan asetukset samaksi kuin kuvakaappauksessa ja muuta Säde-kenttää makusi mukaan (mitä suurempi, sitä pyöreämmät kulmat ovat ja sitä enemmän kuvaa rajataan).

Valitse sitten valokuvan osa, jota haluat käyttää (esimerkiksi avatarina). Jos teet virheen, paina Esc-näppäintä ja toista valinta. Kun haluttu fragmentti on valittu, napsauta sitä hiiren kakkospainikkeella ja valitse Tee valinta... ja napsauta OK.

Valmis, sinulla on valokuvakerros pyöristetyillä kulmilla. Nyt kerros 2 (se, joka toimii taustana) voidaan täyttää millä tahansa värillä tai jättää läpinäkyväksi.

Video aiheesta

Huomautus

Läpinäkyvät png-tiedostot ovat erinomainen muoto, mutta kaikki verkkopalvelut (sosiaaliset verkostot, blogit jne.) eivät tue läpinäkyviä png-tiedostoja. Jos pyöristetyt kulmat eivät toimi, on toinen tapa päästä eroon.

Valitse taustan väri (taso 2), joka on lähinnä sen sivun väriä, johon sijoitat valokuvan. Tallenna sitten tiedosto jpg-muodossa.