Ennen CSS3:n tuloa voit lisätä verkkosivulle elementtejä, kuten lomakkeita tai painikkeita, pyöristetyt kulmat, oli tarpeen käyttää useita kuvia ja paljon lisämerkintöjä. Onneksi nyt pyöristettynä CSS kulmat tekee sen luomisesta erittäin helppoa. Tämä voidaan tehdä myös border-radius-ominaisuuden avulla.
Voit käyttää tätä CSS3-ominaisuutta seuraaville selaimille:
- Chrome 6+;
- Firefox 4+;
- Safari 5+;
- IE9+;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
Työskentelemme "info-box" -luokan kanssa. Tämä voi olla Web-sivusi alue yhteystiedot ja haluat kanssasi CSS:n avulla kulmien ympäri.
Kirjoita sen elementin HTML-koodi, jonka kulmat haluat pyöristää:
Info-box ( -webkit-border-radius: 20px; border-radius: 20px; background-color: #000000; (
Huomautuksia:
Olemme lisänneet kiinteistöstä sekä toimittajaversion että tavallisen version. Lisäämme myös taustavärin. Jotta kehyksen kulman säde näkyy oikein, elementin taustan on oltava erilainen kuin sen alueen tausta, johon elementti on sijoitettu. Muussa tapauksessa sinun on lisättävä reunatyylejä, leveyttä ja väriä.
Ennen kuin teet CSS:n pyöristetyt kulmat, huomioi, että annetussa esimerkissä kehyksen kaikilla neljällä kulmalla on sama säde (20px).
Epätasaiset kulmatVoit myös luoda paneeleja, joissa on pyöristetyt kulmat, jotka eroavat toisistaan. Tämä voidaan tehdä lisäämällä for CSS-ominaisuudet useita merkityksiä. CSS-pikanäppäimillä voit määrittää ne yhdelle riville. Arvojen määritysjärjestys on: ylhäällä vasen, ylhäällä oikea, alhainen oikea, alhaalla vasen:
Info-box ( -webkit-border-radius: 20px 60px 40px 30px; border-radius: 20px 60px 40px 30px; background-color: #000000; (
Kuinka luoda piiriToinen tehoste, jonka voit luoda tällä ominaisuudella, ovat pyöreät kuvat. Jos sinulla on täydellinen neliön muotoinen kuva, voit pyöristää kuvan kulmat CSS:n avulla, jolloin kehys "leikkaa" kuvan reunat ja muodostaa täydellisen ympyrän.
Oletetaan, että HTML-merkinnöissäsi on neliön muotoinen kuva, jonka luokka on "bio-kuva". Voit tehdä tämän kuvan pyöreäksi seuraavalla CSS-koodilla:
img.bio-pic ( -webkit-border-radius: 50%; border-radius: 50%; (
Tässä tapauksessa ei tarvitse asettaa taustaväriä tai reunuksen väriä, koska lisäät nämä tyylit kuvaan, pyöristetyn kulman tehoste toimii, koska kuva eroaa sen taustan väristä, jolle se on asetettu.
Ystävällinen projektitiimi valmisteli artikkelin "Pyöreät kulmat CSS3:n rajasäteellä" käännöksen.
Hyvä Huono
Edellisellä oppitunnilla opimme asettamaan reunuksen elementille. Tarkastelimme myös ominaisuuksia, kuten border-color ja border-style , joilla voit mukauttaa reunuksen väriä ja tyyliä. Kaikki kehyksemme tulivat kuitenkin suorissa kulmissa. Nyt näytämme kuinka luoda pyöristetyt kulmat CSS:ssä reunuksia varten.
Kulmien pyöristäminen: CSS3 border-radius -ominaisuusCSS:n kulmien pyöristäminen voidaan tehdä mille tahansa HTML-sivun elementille. Tätä varten sinun on käytettävä border-radius-ominaisuutta sille sopivalla arvolla. Useimmiten arvo määritetään pikseleinä, mutta myös muita yksiköitä voidaan käyttää, kuten em tai prosentti (jälkimmäisessä tapauksessa laskenta tapahtuu suhteessa lohkon leveyteen).
Vaikutus tästä omaisuudesta on havaittavissa vain, jos tyyliteltävällä elementillä on värillinen tausta ja/tai reunus. Esimerkiksi:
BorderElement ( taustaväri: #EEDDFF; reunus: 6px kiinteä #7922CC; reunan säde: 25px; )
Yllä kuvattu tyyli tuottaa seuraavan tuloksen 200x200 pikselin elementille:
Voit myös tehdä pyöristetyt reunat vain elementin ylä- tai alakulmaan tai antaa kullekin kulman eri pyöristyssäteen - 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: yksinkertaisten pyöreiden kulmien sijaan 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; ) 
Voit sekoittaa arvoja (eli käyttää sekä tavallista että elliptistä pyöristettyä samaan tyyliin), ja voit myös lisätä jokaiseen kulmaan henkilökohtaisen tyylin 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.
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.
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 annettu erilaisia määriä arvot ja tässä tapauksessa saadun lohkon tyyppi.
| 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ä oikean yläkulman että vasemman alakulman ja kolmas arvo - oikean alakulman. |  |
| 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
Divisioonan säde ( tausta: #007E3E; /* Taustaväri */ väri: #fff; /* Tekstin väri */ täyttö: 10 pikseliä; /* Reunukset tekstin ympärillä */ reunuksen säde: 5px; /* Kulmat */ ) Me - akkusatiivin suppletiivimuoto i:stä.
Tulos tämä esimerkki 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
Painikepainike ( tausta: #f2f6f8; /* Taustan väri */ reunus: 1px kiinteä #7a7b7e; /* Reunusasetukset */ leveys: 60px; /* Painikkeen leveys */ korkeus: 60px; /* Korkeus */ reunan säde: 30px) 
Tämän esimerkin tulos on esitetty kuvassa. 2.
Riisi. 2. Pyöreä painike
IN Opera selain filee to on käytetty väärin, jos rajaa ei ole määritetty border-ominaisuuden kautta.
Ominaisuus border-radius voidaan yhdistää muihin ominaisuuksiin, esimerkiksi lisäämällä elementtiin varjo. 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
Hehkuva runko ( tausta: #608DA2; /* Web-sivun tausta */ ) ul ( listatyyli: ei mitään; /* Poista merkit */ ) li ( näyttö: inline-block; /* Inline block element */ reunus: 2px solid #fff; /* Reunus-oikea: 5px /* Leveys: 10px /* Leveys: 10px; */ ) li.active ( tausta: #b00; /* Punainen tausta */ box-shadow: 0 0 4px 2px #fff; /* Hehkuparametrit */ )
Tämän esimerkin tulos on esitetty kuvassa. 3.
Riisi. 3. Hehku ympyrän ympäri
KANSSA käyttämällä rajasädettä Voit tehdä ei vain ympyrän, vaan myös ellipsin sekä elliptisen pyöristyksen lohkoon. 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
Elliptiset kulmat div ( sijainti: suhteellinen; ) span ( sijainti: absoluuttinen; /* Absoluuttinen asemointi*/ tausta: rgba(255,255,255,0,9); /* Valkoinen läpikuultava tausta*/ ) .bulb1 ( leveys: 10px; korkeus: 10px; /* Leveys ja korkeus */ vasen: 65px; ylhäällä: 85px; /* Sijainti */ reunuksen säde: 10px; /* Käännä se ympyräksi */ ) .bulb2 (leveys: 20px; korkeus: 14px; /* Leveys ja korkeus */ vasen: 45px; yläreuna: 60px; /* Sijainti */ reunuksen säde: 10px/6px; /* Muunna ellipsiksi */ ) .bulb3 (vasen: 10px; yläosa: 15px; /* Paikka */ täyttö: 5px 10px; reunan säde: 60px/15px; /* Ellipsin luominen */ ) 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
Kuvien runko ( tausta: #4b5457; ) img (reunuksen säde: 10px; )
Kaikki nykyaikaiset selaimet tukistandardeja hypertekstimerkintä HTML5- ja CCS3-tyyli. Ja jos sivustosi (malli) tukee nykyaikaiset standardit, voit tehdä muutoksia suunnitteluun, kuten pyöristää kulmia, varjoja, liukuväritäytöjä turvautumatta graafisten muokkausohjelmien apuun.
Verkkovastaavat käyttävät sitä kaikkialla pyöristetyt kulmat lohkoissa ja kehyksissä verkkosivustoilla. Tässä artikkelissa kerron sinulle, kuinka pyöristää sivuston kuvien ja valokuvien kulmat ilman käyttöä kolmannen osapuolen ohjelmia, käyttämällä vain CSS:ää.
Jotta artikkelissa annetut esimerkit näkyvät oikein näytölläsi, sinun on käytettävä eniten uusimmat versiot selaimet, FireFox, Chrome ja niiden perusteella tehdyt: Yandex.Browser, Amigo ja niin edelleen.
DIV-lohkojen kulmien pyöristysCSS3-standardin mukaan, jotta DIV:ssä olisi pyöristetyt kulmat, se on muotoiltava raja-säde, esimerkiksi näin:
Reunuksen säde: 10px;
Piirretään selvyyden vuoksi kaksi lohkoa suorilla ja pyöristetyillä kulmilla:
Lohko suoralla kulmalla
Lohko pyöristetyillä kulmilla
Kuvien kulmien pyöristäminenYllä olevan esimerkin mukaisesti voit pyöristää sivustolla olevien kuvien, esimerkiksi valokuvien, kulmia. Selvyyden vuoksi pyöristetään sivun valokuvan kulmat
Tässä on kuva ilman CSS-käsittelyä
Ja nyt pyöristetyillä kulmilla:
Reunuksen säde: 10px;
Tehdään siitä todella "kaunis", lisätään vähän reunusta alusta alkaen...
Reunuksen säde: 10px; reuna: 5px #ccc kiinteä;
ja sitten varjot:
Reunuksen säde: 10px; reuna: 5px #ccc kiinteä; box-shadow: 0 0 10px #444;
Alla oleva vaihtoehto (pyöristetyt kulmat varjolla ilman reunaa) näyttää hyvin samanlaiselta kuin hiirimatto:
Reunuksen säde: 10px; box-shadow: 0 0 10px #444;
Ja lopuksi täydellinen pilkkaa kuvalle
Reunuksen säde: 50 %; reuna: 5px #cfc solid; box-shadow: 0 0 10px #444;
Jos avaat kuvan uudessa ikkunassa, näet, että se (kuva) on muuttumaton ja kaikki kulmat, varjot ja niin edelleen ovat vain käsittelyn tulosta CSS tyylit selaimellasi.
Pieni lyyrinen poikkeamaTyyli rajaa lisää kuvan kokoa reunuksen verran. Jos arvo on määritetty reuna: 5px, lopullisesta kuvasta tulee 10 pikseliä leveämpi ja korkeampi. Muista tämä, joissakin tapauksissa sivuston ulkoasu ei välttämättä toimi.
Tyyli laatikko-varjo ei vaikuta kuvan kokoon, varjo näyttää siirtyvän yli viereisiä elementtejä. Sitä käytettäessä sivuston ulkoasu ei kärsi.
Kuinka pyöristää kuvien kulmat WordPressissäKaikissa yllä olevissa esimerkeissä kirjoitin tyylit suoraan tunnisteisiin html-koodi. Esimerkiksi viimeinen näyttää tältä:
Tämä on hyvä, kun joudut järjestämään yhden kuvan tai valokuvan uudelleen. Mitä jos haluat muuttaa kaiken? Et siis kiipeä kaikkialla sivustollasi muokataksesi jokaisen näyttöä. Useimmissa tapauksissa WordPress-tunniste IMG määrittelee useita tyyliluokkia. Yksi kuvatiedoston yksilöivän nimen mukaan, toinen koon ja toinen kohdistuksen mukaan. Voit täydentää yhtä niistä yllä olevilla parametreilla.
Esimerkiksi kaikille tiedostossa oleville kuville, joille ei ole määritetty kohdistusta tyyli.css sinun WordPress-teemat kirjoita seuraava:
Alignnone (reunuksen säde: 10px; reunus: 5px #cfc solid; box-hadow: 0 0 10px #444; )
Joko eniten kova menetelmä kaikille, joilla on kuva sivustolla. Määritetään kaikkien tunnisteiden tyyli uudelleen IMG:
Img (reunuksen säde: 10px; reunus: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Viimeinen vaihtoehto ei sovellu vain WordPressille, vaan mille tahansa sisällönhallintajärjestelmälle. Ja jopa yksinkertaiselle HTML sivuja siinä tapauksessa, kun kuvia näytettäessä tunniste IMG tyyliluokkia ei ole määrätty. Mutta ole varovainen. Jos ohitat tunnisteen näyttöasetukset IMG sinä muutut ulkonäkö KAIKKI kuvat sivustolla!
Päätelmän sijaanKaikki artikkelin esimerkit ovat ehdollisia, ja niiden tarkoituksena on vain osoittaa joitakin CSS-ominaisuudet kuvankäsittelystä ja näytä kuinka helppoa se on.
Loma lähestyy - kansainvälinen naistenpäivä. Valmistaudutaan siihen etukäteen. Voit onnitella tyttöjä ja naisia omaperäisellä tavalla käyttämällä alla käsiteltyjä postikorttipalveluita.
Valmiit postikorttipalvelut Luo postikortti 8. maaliskuuta verkossa Hyödynnä seuraavat palvelut
Toivon, että käyttämällä yhtä näistä generaattoreista voit onnitella naisia riittävästi 8. maaliskuuta!
Artikkelin sisältö:
Google Plus Google Plus -alusta ei vastannut kehittäjien toiveita, ja se poistetaan kokonaan 2. huhtikuuta 2019. Siihen liittyvät albumit katoavat sen mukana. Google-kuvat, tulee käyttöluvat sivustoilla, joilla on Google Plus -tili. Jo 4. helmikuuta siitä tuli toiminto ei ole käytettävissä Google Plus -profiilien, -kanavien ja -sivujen luominen. Jos tilillesi on tallennettu arvokasta sisältöä, voit ladata sen varmuuskopio.Muutokset vaikuttavat eniten bloggaajiin, jotka pitävät blogejaan Blogspotissa. Jotkut G+ -widgetit, G+ -kommentit ja Google-profiili+. Tämä mainitaan Bloggerin hallinta-alueella olevassa ilmoituksessa:
Työn lopettamisesta ilmoittamisen jälkeen Google API+, joka on määrä tapahtua maaliskuussa 2019, 4. helmikuuta, Bloggerin ja Google+ -integraatioon tehdään useita muutoksia.
Google+ -widgetit. Blogien ulkoasu ei enää tue +1-painiketta, Google+ -seuraajia ja Google+ -merkin widgetejä. Kaikki näiden widgetien esiintymät poistetaan blogistasi.
+1-painikkeet. +1- ja G+-painikkeet poistetaan, samoin kuin Julkaise Google+ -linkit blogitekstien alla ja navigointipalkista.
Huomaa, että jos käytät mukautettu malli, jolla on Googlen ominaisuudet+, se on ehkä vaihdettava. Ota yhteyttä henkilöön, joka antoi sinulle tämän mallin suosituksia varten.
Google+ -kommentit. Kommenttituki lopetetaan käyttämällä Googlea+, ja kaikille tätä ominaisuutta käyttäville blogeille palautetaan vakiokommentit Blogger. Valitettavasti Google+ -palvelun kautta lähetettyjä kommentteja ei voi siirtää Bloggeriin, joten ne eivät enää näy blogissasi. Poistaminen Googlen kommentit Lisäksi valitettavasti järjestelmässä julkaistut kommentit poistetaan pysyvästi. Voit käyttää vain samaa työkalua sanoaksesi varmuuskopiokommentteja Google+ -palvelusta tietokoneellesi. Sille ei vain ole käynnistyslatainta ja kommentit voidaan palauttaa vain manuaalisesti melko vinoon tavalla. Hyvä, että olin ajoissa ajoissa Google Plus -profiilin korvaaminen Blogger-profiililla Jos kirjoitat Blogspotissa, kannattaa nyt palata Google Plus -profiilista Blogger-profiiliin (niille, jotka ovat vaihtaneet siihen. Google Plus kerralla). Suosittelen tekemään tämän heti välttääksesi odottamattomia tilanteita joita saattaa ilmetä poistettaessa Google-tilit Plus. Blogger-profiilin palauttaminen Tämä on helppo tehdä Bloggerin järjestelmänvalvojan asetuksista:
Asetukset -> Mukautetut asetukset–> Käyttäjäprofiili – valitse tästä Blogger
Tallenna muutokset.
Vahvista siirtyminen kohteeseen ja kirjoita nimesi tai lempinimesi.
Älä unohda ladata avataria Blogger-profiiliisi.
Google Plus -profiilin poistaminen Jos päätät päästä eroon G+ -profiilistasi lopullisesti, mene Google Plus -sivullesi -> Asetukset -> vieritä sivun alaosaan -> poista Google Plus -tili:
Tänään kerron sinulle, mikä CSS3 on, minkä kanssa sitä käytetään, mistä etsiä ja kuinka kirjoittaa se oikein. Varoitan, kerron itsestäni, yksinkertaistettuna suurelle yleisölle, kuten näen + esimerkkejä. Aloitetaan siis kaukaa.
CSS ovat tyylejä, joissa objektin ominaisuudet kirjoitetaan. Niitä on siis kaikissa olemassa olevista moottoreista, jos et löydä niitä, joko etsit väärästä paikasta tai niitä ei todellakaan ole ( vino sivusto). Mistä niitä yleensä löytyy? Yleensä tämä on sivuston juuri, style.css-tiedoston nimi, vaikka periaatteessa nimi ei ole yhtä tärkeä kuin .css-tunniste, jos tällaisella tiedostotunnisteella varustettu tiedosto on tyylitiedosto.
Katso myös blogissani.
