ota huomioon, että CSS-tyylejä tietylle luvulle syötetään tiedostoon kerran, ja HTML-tunnisteen voi sijoittaa sivustolle rajoittamattoman määrän kertoja.
Tuloksen tuloksena saamme seuraavan suorakulmio kehyksellä.
Kuinka tehdä pyöristettyjä kulmia CSS:ssä
Attribuuttia käytetään kulmien pyöristämiseen raja-säde.
Voisimme lisätä vain tämän ominaisuuden. Se näyttää tavallisesti pyöristystuloksen uusissa selainversioissa, mutta monilla käyttäjillä on edelleen vanhempia versioita, joissa tämä määrite ei toimi oikein. Siksi lisäämme yhteensopivuuden vuoksi muutaman kuvauksen tästä määritteestä, joka on sidottu suoraan tiettyihin selaimiin, lohkoomme Style.css-tiedostossa, jolloin tuloksena on seuraava koodi:
HTML div-tunniste antaa meille suorakulmio kehyksessä, jossa on pyöristettyja kulmat:
ja tekstin näyttämiseen käytettävä HTML-tunniste näyttää tältä:
|
pib9.ru
|
Saamme pyöristetty suorakulmio ja teksti: 
Jos poistat suorakulmion koon kuvausattribuutit koodista leveys Ja korkeus, niin saat seuraavat muodot pyöristetyillä kulmilla:
1. Ei tekstiä
Tässä tapauksessa lomakkeet ottavat ympäristön mitat: pituus vastaa kentän leveyttä ja korkeus muuttuu lomakkeen täyttyessä sisällöllä.
Pyöristä valitut kulmat
Tyylin kuvauksessa 10px-parametri attribuutissa raja-säde näyttää kaarevuussäteen, jota voidaan muuttaa valitsemalla haluamasi. Jos arvoksi asetetaan 0, pyöristystä ei tapahdu. Tätä ominaisuutta voidaan käyttää, kun sinun on pyöristettävä valittuja kulmia.
Kirjoita jokaisen kulman pyöristyssäteen arvot osoittaen nollia, missä peruutamme pyöristyksen. Perutaan esimerkiksi kolmannen ja neljännen kulman pyöristys. Koodimme näyttää tältä:
1 jäljellä yläkulma.
2. Oikea yläkulma.
3. Oikea alakulma.
4. Vasen alakulma.
Tämä johtaa suorakulmioon, jossa on valitut käyrät vain yläkulmissa.
Kulmat lasketaan myötäpäivään alkaen vasemmasta yläkulmasta: 
2. Kulmien pyöristäminen HTML-koodilla kirjoittamatta tyylitiedostoon
Harkitse toista tapaa saada suorakulmio, jossa on pyöristetyt kulmat HTML:n avulla koodi kirjoittamatta tyylitiedostoon.
HTML pyöristetyt kulmat
On yksi pieni ominaisuus, joka yksinkertaistaa koko prosessia entisestään - tämä HTML pyöristetyt kulmat. Se koostuu HTML-koodin luomisesta, joka sisältää samat tyylit kuin CSS-koodit. Tämä käyttää samoja määritteitä kuin CSS-lohkossa ja poistaa tarpeen kirjoittaa lohkoa Style.css-tiedostoon. Sanalla sanoen korvaamme CSS-koodin kokonaan HTML-koodilla.
CSS-lohkomme sijasta saamme HTML-skripti, jonka asetamme paikkaan, jossa pyöristetyn kulman suorakulmion pitäisi ilmestyä:
Ensimmäistä tapaa pyöristää kulmat voidaan käyttää, kun samaa muotoa käytetään useammin kuin kerran tyylejä muuttamatta. Toista menetelmää käytetään lomakkeille, joiden tyylejä käytetään kerran.
3. Kuvat pyöristetyillä kulmilla. Kehys HTML-kuvan ympärille
Haluan myös antaa sinulle hyödyllistä tietoa. Usein käytössä kuvia verkkosivujen suunnitteluun, Haluan todella tehdä niistä vieläkin kauniimpia muuttamalla niiden muotoa, kehystämällä ne kauniin värisellä ja eri leveydellä. Tämä herättää kysymyksen: " Kuinka pyöristää kuvan kulmat?”.
Tämä tehdään hyvin yksinkertaisesti, ja nyt opimme tekemään sen.
Laitetaan kuva sivustolle tekemällä siitä oma tausta div-tunnisteen taustana. Saamme seuraavan koodin ja kuvan:
Pyöristää kuvan kulmat lisäämällä kehys
Kuvien kulmien pyöristäminen CSS:ssä ja HTML:ssä ja reunuksen lisääminen voidaan tehdä jommallakummalla kahdesta yllä kuvatusta tavasta.
Tämän artikkelin ensimmäistä menetelmää käyttämällä tyylitiedoston ja div-tunnisteen HTML-koodin kuvakoodit näyttävät tältä:
Huomaa, että jotkut attribuutit voidaan syöttää tyylitiedostoon ja jotkut div-tunnisteeseen. Meidän tapauksessamme kuvan mitat leveys ja korkeus lisätään HTML-koodiin.
Toisen menetelmän HTML-koodi ilman tässä artikkelissa kuvattua tyylitiedostoa näyttää tältä:
Kummankin menetelmän koodien seurauksena saamme saman tuloksen - kuvan pyöristetyillä kulmilla:
Hyvää huomenta, iltapäivää, iltaa tai yötä kaikille. Dmitry Kostin on kanssasi yhä uudelleen. Jotenkin katsoin läpi erilaisia kuvia ja sitten pidin joistakin niistä. Ja he pitivät niistä, koska niissä oli pyöristetyt reunat. Se näyttää heti mielenkiintoisemmalta. Etkö usko niin? Ja siksi tämän päivän oppitunnilla haluaisin kertoa sinulle, kuinka kulmat pyöristetään Photoshopissa, jotta valokuvasta tulee kiinnostavampi.
Pidän Photoshopissa siitä, että monissa tapauksissa sama asia voidaan tehdä useilla tavoilla. Joten se on täällä. Aloitetaan photoshopillamme.
Tasoitus reunusten avulla
Tämä menetelmä on samanlainen kuin edellinen, mutta silti hyvin erilainen. Teemme kaiken samalla kuvalla.
Luomalla muoto
Kolmas menetelmä on jo radikaalisti erilainen kuin kaksi edellistä. Pidä siis muutaman sekunnin tauko ja jatka eteenpäin. En vaihda kuvaa ja lataan tämän auton Photoshopiin uudelleen.
Näetkö mihin päädyit? Kuvassa on pyöristetyt reunat, ja kaikki siksi, että se näkyy vain siellä, missä on piirretty pyöristetty suorakulmio. Mutta nyt voit rajata ylimääräisen valokuvan "Frame"-työkalulla tai voit tallentaa kuvan heti ja sinulla on jo erillinen kuva pyöristetyillä kulmilla.
Yritä tehdä kaikki itse ja kerro samalla, mikä esitetyistä menetelmistä on sinulle parempi.
Ja muuten, jos sinulla on aukkoja Photoshopissa tai haluat vain tutustua siihen täysin niin pian kuin mahdollista, niin suosittelen katsomaan sellaisen loistava photoshop-kurssi aloittelijoille. Kurssi on hyvin suoritettu, kaikki kerrotaan ja näytetään hienosti ja jokaisesta materiaalista keskustellaan erittäin yksityiskohtaisesti.
No, lopetan tämän päivän oppituntini. Älä unohda tilata uusia artikkeleita ja jakaa tämä ystäviesi kanssa. Olin iloinen nähdessäni sinut blogissani. Odotan sinua taas. Hei hei.
Terveisin Dmitri Kostin
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. ilmestyy uusi solmu kuvassa 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.
Erittäin yksinkertaisella tavalla(vektoriobjektia käyttämällä) kaikki on mahdollista kulmat suorakaiteen muotoisessa kuvassa. Turvautumatta edellä kuvatulla menetelmällä muokkaussolmuja, piirrä tuodun kuvan viereen samankokoinen suorakulmio suorakulmiotyökalulla tai kutsu työkalu F6-näppäimellä.
Kun "Muoto"-työkalu on jo tuttu, napsauta suorakulmiota ja vedä hiiri sen solmujen 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ä kun tuot kuvan asiakirjaan Corel Draw alkuperäinen tiedosto Kuvaa ei muuteta, joten voit käyttää sitä alkuperäisessä muodossaan, jos et ole tyytyväinen pyöristetyn kulman tulokseen.
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 ohjelma Photoshop
- - valokuva
Ohjeet
Napsauta hiiren kakkospainikkeella Taustakerros, valitse Kopioi taso 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. ilmestyy ylimääräinen valikko tarvittaessa (Rounded Rectangle Tool). 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, napsauta Esc-näppäin ja toista valinta. Jälkeen tarvittava fragmentti korostetaan, napsauta sitä oikealla painikkeella hiirellä 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 - loistava formaatti, eivät kuitenkaan kaikki verkkopalvelut ( sosiaalinen media, blogit jne.) tukevat läpinäkyviä png-tiedostoja. Jos pyöristetyt kulmat eivät toimi, on toinen tapa päästä eroon.
Valitse varten tausta(Layer 2) on väri, joka on lähinnä sen sivun väriä, johon asetat valokuvan. Tallenna sitten tiedosto jpg-muodossa.
Tervehdys, ystävät. Tämä artikkeli on omistettu melko suosittu aihe aloittelevien verkkovastaavien keskuudessa - pyöristetty CSS kulmat . Kysymykset, joihin yritän vastata, koskevat miten toimia pyöristetyt kulmat sivuston elementtejä käyttämällä vain CSS:ää turvautumatta kuvien käyttöön.
SISÄÄN tätä menetelmää on sekä hyviä että huonoja puolia. Etuna on tietysti se, että kuvia ei tarvitse luoda millään graafinen editori, lataa ne palvelimelle ja järjestä ne sitten CSS:n avulla tarvittaviin paikkoihin halutun vaikutuksen luomiseksi. Tässä tapauksessa on tarpeen luoda lisäelementtejä HTML-koodissa ja myös kirjoittaa yksittäisiä ominaisuuksia jokaiselle niistä.
Mitä tulee miinuksiin, tässä voidaan huomata yksi ongelma - kaikki verkkoselaimet eivät tue tätä ominaisuutta, etenkään vanhentuneet versiot erilaisia selaimia.
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-elementti ja pyöristää sen kulmat. Luodaan esimerkiksi lohko ja määritetään sille ominaisuudet suoraan HTML-koodissa style-attribuutin avulla. Ensin meillä lohkoelementti 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. Kiinteistö toimii kuitenkin edelleen ilman käyttämällä reunaa elementissä. Toivottavasti ymmärsit mitä halusin sanoa. Tämän omaisuuden arvo on mikä tahansa numeerisia arvoja, joita voidaan käyttää CSS:ssä, kuten prosentit, pikselit (px), pisteet (pt) ja niin edelleen. Kyllä, ja se pitää ottaa huomioon tämä omaisuus 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 selvittää, kuinka lisätä oma säde 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 lomakkeen jokaisen kulman reunalle lyhyt huomautus, 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 sekaisin, 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:
SISÄÄN 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 on oltava 35 pikseliä ja pystysuoran sä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ä:
SISÄÄN tässä tapauksessa arvo ennen vinoviivaa (/) 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ällainen:
Ja artikkelin lopussa puhutaan tuesta eri selaimet tästä omaisuudesta.
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 tehdä pyöristettyjä kulmia käyttämällä vain CSS:ää.
Onnea sinulle!
Internetissä on monia esimerkkejä ja opetusohjelmia lohkon tai taulukon kulmien pyöristämiseen, mutta yleensä nämä opetusohjelmat perustuvat kuvien käyttöön tai lisälohkojen käyttöön.
Tämän päivän opetusohjelmassa näytän sinulle, kuinka voit pyöreät pöydän kulmat käyttämällä vain CSS:ää.
Suora merkintä (toinen taulukko eroaa solujen asettelun suhteen kärkilinja):
| Nulla gravida. | Urna augue. | Nunc iaculis bibendum. | |
| Vestibulum tempor | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend. | Pellentesque cursus, nunc ut facilisis hendrerit |
1. Pyöristä kulmat suoraan pöydässä (pöytälappu).
BContentTables( border:1px solid #CCCCCC; leveys:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow: piilotettu ; marginaali:0,7em auto;)
2. Poista kaikki tausta ensimmäiseltä riviltä.
Tr.bCTable_Header (tausta: ei mitään;)
3. Valitse pseudo-class:first-child ja kombinaattorilla > taulukon ensimmäinen solu. Pyöristä ensimmäisen solun vasen yläkulma. Ensimmäisen rivin tausta koostuu tämän rivin solujen taustasta.
Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; ) tr.bCTable_Header td(väri:valkoinen; fontin koko:110%; taustaväri:#00843C;)
4. Valitse pseudo-class:last-child ja kombinaattori > ensimmäisen rivin viimeinen solu. Sitä varten pyöristetään oikea yläkulma.
Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0;)
5. Pyöristä viimeisen rivin alakulmat. Älä unohda poistaa taustaa viimeiseltä riviltä; Rivin tausta asetetaan viimeisen rivin solujen taustalla.
BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:ei mitään; )
6. Sitten analogisesti kohtien 3-4 tuumaa kanssa viimeinen rivi pyöristää ensimmäisen ja viimeisen solun kulmat.
BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) . bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- säde:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0;)
