Luulen, että kaikki tietävät, että pyöristettyjen kulmien tekeminen lohkoille on suuri 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 olemassa olevan ongelman korjausten käytön hienouksista ja vivahteista. 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– työn nopeus. Kulmia ei pyöristetä heti. Siitä hetkestä, kun sivu latautuu, kunnes kulmat muuttuvat vaadittava lomake, kestää noin sekunnin. 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, tällaisia yksinkertaisia tehtäviä kohdataan 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 (esimerkiksi jQueryä käytettäessä).
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 muuta. 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 rajan 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.
Olen varma, että olet jo perehtynyt border css -ominaisuuteen. Opitko jotain uutta, mitä et tiennyt ennen css borderista? No, et vain opi, vaan näet myös useita uusia asioita, joita et koskaan ennen tiennyt!
CSS3:lla ei voi ainoastaan luoda pyöristettyjä kulmia, vaan puhdasta CSS-koodia voidaan käyttää myös monimutkaisten muotojen luomiseen. Aiemmin voit käyttää taustakuvaa luodaksesi ulkonäön pyöristetyistä kulmista. Uusien reunusten käyttötekniikoiden ansiosta voimme tehdä tämän puhtaalla CSS-koodilla.
CSS-reunuksen käytön perusteet
Olet luultavasti jo tuttu tavallinen käyttö reunan ominaisuudet:
Reunus: 1px yksivärinen musta;
Yllä oleva koodi tulostaa 1 pikselin reunuksen, joka on musta. Helppoa ja yksinkertaista. Voit myös laajentaa syntaksia hieman:
Reunuksen leveys: paksu; reuna-tyyli: kiinteä; reunan väri: musta;
Lisäyksenä voit käyttää tiettyjä arvoja rajan ominaisuuksia-leveys, kolme avainsanoja: ohut, keskikokoinen, paksu.
Mutta laajennetun syntaksin käyttö ei ole aina käytännöllistä. Katsotaanpa esimerkkiä, kun sinun on vaihdettava lohkokehyksen väriä, kun hiirtä liikutetaan. Tässä tapauksessa lyhennetyn syntaksin käyttö on paljon yksinkertaisempaa:
Laatikko ( reunus: 1px tasainen punainen; ) .box:hover ( reunus: 1px kiinteä vihreä; )
Tyylikkäämpi ja yksinkertaisempi tapa tehdä tämä on:
Laatikko ( reunus: 1px tasainen punainen; ) .box:hover ( reunuksen väri: vihreä; )
Kuten näet, edistynyt tekniikka on hyödyllinen myös silloin, kun muutamme vain joitain ominaisuuksia: leveyttä, tyyliä, väriä ja muita.
Raja-säde
Raja-säde- Tämä on CSS3:n "kultainen" ominaisuus - ensimmäinen, yleisin ominaisuus, josta tuli käytännöllinen ja hyödyllinen. IE8:aa ja alla olevia versioita lukuun ottamatta kaikki selaimet näyttävät pyöristetyt kulmat tätä käyttämällä.
Webkitille ja Mozillalle on kuitenkin käytettävä erityisiä etuliitteitä, jotta tyyli olisi oikea.
Webkit-border-radius: 10px; -moz-border-radius: 10px; reunan säde: 10px;
Nykyään voimme poistaa erikoisetuliitteet ja käyttää vakiomuotoista raja-sädemuotoa.
Toinen etu on, että voimme käyttää erityisiä arvoja lohkon jokaiselle puolelle:
Reunus-ylävasen-säde: 20px; raja-ylä-oikea-säde: 0; reunus-alha-oikea-säde: 30px; raja-ala-vasen-säde: 0;
Yllä olevassa koodissa reunus-yläoikean-säteen ja reuna-alha-vasen-säteen asettaminen "nulliksi" voi saada hämmästyttäviä muotoja. Vaikka elementti voi periä joitain ominaisuuksia, jotka on nollattava.
Kuten marginaali ja täyte, voimme pakata syntaksin:
/* ylhäällä vasen, ylhäällä oikea, alhaalla oikea, alhaalla vasen */ border-radius: 20px 0 30px 0;
Esimerkkinä border-radius-ominaisuuden käytöstä näytän sinulle "sitruunan", jota suunnittelijat käyttävät usein verkkosivustojen suunnittelussa:
Sitruuna (leveys: 200px; korkeus: 200px; tausta: #F5F240; reunus: 1px kiinteä #F0D900; reunan säde: 10px 150px 30px 150px;)
Mennään perusasioiden pidemmälle
Monille suunnittelijoille kaikki tieto CSS-reunusominaisuuksien alalla päättyy tähän. Mutta on joitain muita hienoja asioita, joiden avulla voit luoda upeita asioita!
Monimutkaiset css-reunusrakenteet
Suunnitelmien luomiseen monimutkaisia reunarakenteita käyttämällä on monia tekniikoita. Katsotaanpa esimerkiksi seuraavaa...
Border-tyyli
Käytämme aina tunnetuimpia ominaisuuksia kiinteinä, katkoviivoina ja pisteinä. Mutta on olemassa pari muuta reunatyylistä ominaisuutta: ura ja harja.
Reunus: 20 kuvapisteen ura #e3e3e3;
Tai laajennetussa syntaksissa:
Reunuksen väri: #e3e3e3; reunan leveys: 20 pikseliä; reuna-tyyli: ura;
Vaikka nämä ominaisuudet ovat hyödyllisiä, ne eivät ole perusta monimutkaisten kehysten luomiselle.
Outline
Suosituin luomistekniikka kaksoiskehys- ääriviivaominaisuuden käyttö.
Laatikko (reunus: 5px kiinteä #292929; ääriviivat: 5px kiinteä #e3e3e3; )
Tämä menetelmä toimii hyvin, vaikka se rajoittaa meidät vain kahteen kehykseen. Joskus täytyy luoda gradienttireunus, joka koostuu useista kerroksista... miten sitten?
Pseudoelementtejä
Kun ääriviivatekniikka ei riitä, vaihtoehtoisia keinoja on käyttää pseudoelementtejä:ennen ja:jälkeen. Millä voi lisätä lisäkehyksiä elementtiin:
Laatikko ( leveys: 200px; korkeus: 200px; tausta: #e3e3e3; sijainti: suhteellinen; reunus: 10px tasainen vihreä; ) /* Luo kaksi laatikkoa, joiden leveys on sama kuin säilö */ .box:after, .box:before ( sisältö: ""; sijainti: absoluuttinen: 0
Ei näytä kovin tyylikkäältä, mutta ainakin toimii. On hieman vaikeaa selvittää värien järjestystä kehyksissä... mutta voit selvittää sen.
Box-Shadow
Mielenkiintoinen "lasten tapa" luoda samanlainen vaikutus on käyttää CSS3 box-shadow -ominaisuutta:
Laatikko (reunus: 5px tasainen punainen; laatikon varjo: 0 0 0 5px vihreä, 0 0 0 10px keltainen, 0 0 0 15px oranssi;)
Tässä tapauksessa olimme älykkäämpiä ja käytimme erityistä laatikkovarjoominaisuutta. Muuttamalla x, y, sumeusparametrit nollaan, voimme käyttää eri värejä useiden kehysten luomiseen.
Mutta siinä on ongelma: vanhemmissa selaimissa, jotka eivät ymmärrä box-shadow -ominaisuutta, vain yksi 5px punainen kehys näkyy.
"Muistaa! Sivuston ulkoasun tulee näyttää selainväliseltä, eli samalta kaikissa selaimissa. Mukaan lukien vanhemmat versiot."
Kulmien vaihtaminen
Käytetyn lisäksi yksinkertainen merkitys border-radius, voimme määrittää kaksi erillistä - erottamalla ne / -osoittelemme vaaka- ja pystysäteen.
Esimerkiksi:
Reunuksen säde: 50px / 100px; /* vaakasäde, pystysäde */
... tämä vastaa:
Reunus-ylävasen-säde: 50px 100px; reunus-ylä-oikea-säde: 50px 100px; reunus-ala-oikea-säde: 50px 100px; reunus-ala-vasen-säde: 50px 100px;
Tämä tekniikka sopii ainutlaatuisten lohkomuotojen luomiseen. Voit luoda kääreeseen paperitehosteen esimerkiksi seuraavasti:
Laatikko (leveys: 200px; korkeus: 200px; tausta: #666; reunus-ylä-vasen-säde: 15em 1em; reunus-alha-oikea-säde: 15em 1em; )
CSS-lomakkeet reunalla
Tämä tekniikka näyttää, kuinka voit luoda CSS-lomakkeita, kun käytät elementtejä nolla mitat korkeus ja leveys. Yllättynyt? Katsotaanpa esimerkkiä...
Seuraavissa esimerkeissä käytämme seuraavia merkintöjä:
...ja seuraava perustyyli:
Laatikko (leveys: 200px; korkeus: 200px; tausta: musta; )
Yleisin esimerkki CSS-muotojen käytöstä on rivitysnuolen luominen. Tämän nuolen salaisuus piilee eriväristen reunusten luomisessa jokaiselle puolelle. Aseta sitten leveys- ja korkeusmääritteiksi 0.
Määritetään nuoliluokka div-lohkolle:
Nuoli (leveys: 0; korkeus: 0; reunus yläreunassa: 100px tasainen punainen; reunus oikea: 100px tasainen vihreä; reuna-ala: 100px tasainen sininen; reunus vasen: 100px tasainen keltainen; )
Havainnollistamiseen käytämme ensin laajennettua syntaksia. Seuraavaksi voimme poistaa ylimääräisen koodin käyttämällä lyhennettyä syntaksia:
Nuoli (leveys: 0; korkeus: 0; reunus: 100px kiinteä; reunuksen väri: punainen vihreä sininen keltainen;)
Mielenkiintoista, eikö? Nyt asennamme läpinäkyviä värejä kaikilta puolilta paitsi sinistä puolta.
Nuoli (leveys: 0; korkeus: 0; reunus: 100 pikseliä yhtenäinen; reuna-ala-väri: sininen; )
Siitä tuli hienoa! Mutta tämä on ristiriidassa semanttinen asettelu, luo .arrow div vain lisätäksesi nuolen sivulle. Tätä tarkoitusta varten voimme käyttää pseudoelementtejä, mitä teemme nyt.
Luo puhekupla
Puhekuplan luomiseksi tarvitsemme pienen palan puhdas CSS koodi ja yksi div-lohko.
Puhekupla ( sijainti: suhteellinen; taustaväri: #292929; leveys: 200 pikseliä; korkeus: 150 pikseliä; rivin korkeus: 150 kuvapistettä; /* pystysuunnassa keskellä */ väri: valkoinen; tekstin tasaus: keskellä; )
Puhekupla:jälkeen ( sisältö: ""; )
Tässä vaiheessa luomme aiemmin tekemämme nuolen, lisäämme sen elementtiin ja jäljellä on vain sijoittaa se:
Puhekupla: jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reuna: 10px kiinteä; reunuksen väri: punainen vihreä sininen keltainen; )
Jos haluamme nuolen osoittavan alaspäin, meidän on asetettava kaikki reunat läpinäkyviksi paitsi yläreuna.
Puhekupla:jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reunus: 10px kiinteä; reunuksen yläväri: punainen; )
Kun luomme tämän CSS-lomakkeen, emme voi erikseen määrittää nuolen kokoa. Sen sijaan voimme asettaa border-width -ominaisuuden, joka määrittää nuolelle koon. Asetamme myös alareunassa olevan nuolen sijainnin keskelle. Vastaavasti tätä varten käytämme arvoja ylhäällä ja vasemmalla.
Puhekupla:jälkeen (sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reunus: 15px kiinteä; reunuksen yläväri: punainen; yläosa: 100%; vasen: 50%; )
Lisäksi meidän on vain annettava sille sama väri kuin lohkolle. Muista, että sijoittaessasi sinun on otettava huomioon muiden näkymättömien reunusten koko (15px). Annamme myös lohkon pyöristyksen kulmiin.
Puhekupla ( /* … muut tyylit */ reuna-säde: 10px; ) .speech-bubble:after ( sisältö: ""; sijainti: absoluuttinen; leveys: 0; korkeus: 0; reuna: 15px kiinteä; reuna-yläosa -väri: #292929: 100% margin-vasen: -15px */ )
Ei paha, vai mitä? Käyttämällä useita CSS-luokkia ja rajatemppuja voit luoda sellaisen.
/* Puhekuplien käyttö: Käytä luokkaa .speech-bubble ja .speech-bubble-DIRECTION alla olevan kuvan mukaisesti
Bonus! Pysty keskitys lohkon sisällä
Yhden tekstirivin kohdalla voit käyttää rivinkorkeutta. Mutta jos sinulla on kaksi tai useampi riviä tekstiä... Paras ratkaisu on asettaa näyttöominaisuus taulukkoon ja laittaa kaikki teksti kappaleeseen. Tältä se näyttää html-merkinnöissä:
Speech-bubble ( /* muut tyylit */ näyttö: taulukko; ) .speech-bubble p ( näyttö: taulukko-solu; pystytasaus: keskellä; )
Emme rajoita itseämme kolmioihin. CSS pystyy näyttämään erilaisia muotoja – jopa sydämiä ja biohazard-merkin.
Biohazard (leveys: 0; korkeus: 0; reunus: 60 pikseliä kiinteä; reunan säde: 50 %; reunuksen yläväri: musta; reunan alaosan väri: musta; reunuksen vasen väri: keltainen; reunus-oikea-väri väri: keltainen)
Johtopäätös
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 -ominaisuus
CSS: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 antaa elementille seuraavan tuloksen
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 150x450 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ä samalla tyylillä), 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.
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ä:
Kaikki tukevat CSS-raja-säde-ominaisuutta modernit versiot selaimet.
Border-radius-ominaisuus ei koske taulukkoelementtejä, jos niillä on jaetut tai erilliset reunat."> border-collapse on tiivistys .
Huomautus: Kuten mikä tahansa lyhennelmäominaisuus, yksittäiset aliominaisuudet eivät voi periä, kuten border-radius:0 0 inherit inherit , mikä ohittaisi osittain olemassa olevat määritelmät. Sen sijaan on käytettävä yksittäisiä pitkän käden ominaisuuksia.
Syntaksi
/* Ensimmäisen säteen syntaksi sallii yhdestä neljään arvoa*//* Säde on asetettu kaikille 4 sivulle */ border-radius: 10px; /* ylhäällä-vasemmalla-ja-alhaalla-oikealla | ylhäältä oikealta ja alhaalta-vasemmalta*/ reunan säde: 10px 5%; /* ylävasemmalla | ylhäältä oikealta ja alhaalta-vasemmalta | alhaalla oikealla*/ reunan säde: 2px 4px 2px; /* ylävasemmalla | yläoikealla | alhaalla oikealla | alhaalla vasemmalla*/ reunan säde: 1px 0 3px 4px; /* Toisen säteen syntaksi sallii yhdestä neljään arvoa*/ /* (ensimmäisen säteen arvot) / säde*/ reunan säde: 10px 5% / 20px; /* (ensimmäisen säteen arvot) / ylhäällä-vasemmalla-ja-alhaalla-oikealla | ylhäältä oikealta ja alhaalta-vasemmalta*/ reunan säde: 10px 5% / 20px 30px; /* (ensimmäisen säteen arvot) / ylävasemmalla | ylhäältä oikealta ja alhaalta-vasemmalta | alhaalla oikealla*/ reunan säde: 10px 5px 2em / 20px 25px 30%; /* (ensimmäisen säteen arvot) / ylävasemmalla | yläoikealla | alhaalla oikealla | alhaalla vasemmalla*/ reunan säde: 10px 5% / 20px 25em 30px 35em; /* Globaalit arvot*/ border-radius: inherit; raja-säde: alku; raja-säde: ei asetettu;Rajan säteen ominaisuus määritetään seuraavasti:
- yksi, kaksi, kolme tai neljä CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo.">
tai CSS-tietotyyppi edustaa prosenttiarvoa. Sitä käytetään usein määrittämään koko suhteessa elementin pääobjektiin. Monet ominaisuudet voivat käyttää prosenttiosuuksia, kuten leveyskorkeus marginaalin täyte ja font-size.> arvot. Tätä käytetään asettamaan kulmille yksi säde. - jota seuraa valinnaisesti "/" ja yksi, kaksi, kolme tai neljä
tai Arvot. Tätä käytetään lisäsäteen asettamiseen, jotta sinulla voi olla elliptisiä kulmia.
Arvot
| säde | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| ylhäällä-vasemmalla-ja-alhaalla-oikealla | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| ylhäältä oikealta ja alhaalta-vasemmalta | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| ylävasemmalla | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| yläoikealla | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| alhaalla oikealla | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
|
| alhaalla vasemmalla | Onko CSS-tietotyyppi edustaa etäisyysarvoa. Pituuksia voidaan käyttää useissa CSS-ominaisuuksissa, kuten leveys, korkeus, marginaali, täyte, reunuksen leveys, kirjasinkoko ja tekstin varjo."> |
Reunuksen säde: 1em/5em; /* ... vastaa: */ border-top-left-radius: 1em 5em; reunus-ylä-oikea-säde: 1em 5em; raja-ala-oikea-säde: 1em 5em; raja-ala-vasen-säde: 1em 5em;
reunan säde: 4px 3px 6px / 2px 4px; /* ... vastaa: */ border-top-left-radius: 4px 2px; reunus-ylä-oikea-säde: 3px 4px; reunus-ala-oikea-säde: 6px 2px; reuna-ala-vasen-säde: 3px 4px;
1,4 / 1,4Muodollinen syntaksi Tämän sivun yhteensopivuustaulukko on luotu strukturoiduista tiedoista. Jos haluat osallistua tietoihin, käy osoitteessa https://github.com/mdn/browser-compat-data ja lähetä meille vetopyyntö. Päivitä GitHubin yhteensopivuustiedot Huomautuksia
Huomautuksia
Täysi tuki 1
Huomautuksia
Huomautuksia
Täysi tuki 1
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Täysi tuki 1
Täysi tuki 1
Täysi tuki 1
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Huomautuksia
Määritelmä ja sovellus border-radius CSS-ominaisuuden avulla voit määrittää elementin reunojen muodon. Tämä ominaisuus on lyhenne seuraavista neljästä ominaisuudesta: Fileennin sädettä käytetään koko taustalle tai taustakuva taustaominaisuuden määrittämä (vaikka elementillä ei olisi reunoja). Tarkka sijainti CSS-syntaksi: reunan säde: 15px 15% / 10px 15em 15px 5em; JavaScript-syntaksi:
Esimerkkejä reunus: kiinteä 10px;
/* reunus kaareutuu D-kirjaimeen */ reunuksen säde: 10px 40px 40px 10px;
reuna: ura 1em punainen;
raja-säde: 2em;
tausta: kulta;
reuna: harjanteen kulta;
reunan säde: 13em/3em;reuna: ei mitään;
reunan säde: 40px 10px;
reuna: ei mitään; raja-säde: 50 %; reuna: katkoviiva; reunan leveys: 10px 4px; reunan säde: 10px 40px;
reunus: katkoviiva; reunan leveys: 2px 4px;
reunan säde: 40 pikseliä; Livenäytteitä
Tekniset tiedot Erittely
Status Kommentti
Animaatiotyyppi Kommentti
Kanoninen järjestys muodollisen kieliopin määrittelemä ainutlaatuinen ei-moniselitteinen järjestys
Selaimen yhteensopivuus
Työpöytä mobiili
Kromi Reuna Firefox Internet Explorer Ooppera Safari Android-verkkonäkymä Chrome Androidille Edge Mobile Firefox Androidille Opera Androidille Safari iOS:ssä Samsung Internet
Perustuki Chrome Täysi tuki 4 Etuliitteenä Toteutettu toimittajan etuliitteellä: -webkit- Ei tukea 1-12 Toteutettu toimittajan etuliitteellä: -moz- Safari Täysi tuki 5 Täysi tuki 3 Täysi tuki 2 Edge Mobile Täysi tuki Kyllä Täysi tuki Kyllä Täysi tuki Kyllä Ennen Firefox 50:tä pyöristetyt kulmat (reunuksen säteellä) hahmonnettiin aina ikään kuin reunustyyli olisi kiinteä . Tämä on korjattu Firefox 50:ssä. Opera Android Täysi tuki
Safari iOS Täysi tuki Kyllä Elliptiset reunat Ennen Chrome 4:ää vinoviivaa/merkintää ei tueta. Jos määritetään kaksi arvoa, kaikkiin neljään kulmaan piirretään elliptinen reuna. -webkit-border-radius: 40px 10px; vastaa rajan sädettä: 40px/10px; . Edge Täysi tuki 12 Firefox Täysi tuki 3.5 IE Täysi tuki Kyllä Opera Täysi tuki Kyllä Ennen Safari 4.1:tä kauttaviivaa / merkintää ei tueta. Jos määritetään kaksi arvoa, kaikkiin neljään kulmaan piirretään elliptinen reuna. -webkit-border-radius: 40px 10px; vastaa rajan sädettä: 40px/10px; . WebView Android? Chrome Android Täysi tuki Kyllä Safari iOS?
Samsung Internet Android Täysi tuki Kyllä 4 arvoa 4 kulmaan Ennen Chrome 4:ää vinoviivaa/merkintää ei tueta. Jos määritetään kaksi arvoa, kaikkiin neljään kulmaan piirretään elliptinen reuna. -webkit-border-radius: 40px 10px; vastaa rajan sädettä: 40px/10px; . Chrome Täysi tuki 4 Firefox Täysi tuki 3.5 IE Täysi tuki Kyllä Firefox Täysi tuki Kyllä Ennen Safari 4.1:tä kauttaviivaa / merkintää ei tueta. Jos määritetään kaksi arvoa, kaikkiin neljään kulmaan piirretään elliptinen reuna. -webkit-border-radius: 40px 10px; vastaa rajan sädettä: 40px/10px; . WebView Android? Safari Täysi tuki 5 Edge Mobile Täysi tuki Kyllä Firefox Android Täysi tuki Kyllä Chrome Android Täysi tuki Kyllä Safari iOS?
reunan säde: 40 pikseliä; Elliptiset reunat Ennen Chrome 4:ää vinoviivaa/merkintää ei tueta. Jos määritetään kaksi arvoa, kaikkiin neljään kulmaan piirretään elliptinen reuna. -webkit-border-radius: 40px 10px; vastaa rajan sädettä: 40px/10px; . Arvoja ei tueta vanhemmissa Chrome- ja Safari-versioissa (se korjattiin syyskuussa 2010). Firefox
Legenda Täysi tuki Täysi tuki Ei tukea Ei tukea Yhteensopivuus tuntematon
Yhteensopivuus tuntematon Katso toteutusohjeet.
Katso toteutusohjeet. Edellyttää toimittajan etuliitettä tai eri nimeä käyttöä varten.
Reunusäteeseen liittyvät CSS-ominaisuudet: CSS-ominaisuudet
Selaimen tuki
Omaisuus
Ooppera
IExplorer
Reunaraja-säde 5.0
4.0
-webkit-4.0
3.0
-moz-10.5
5.0
3.1
-webkit-9.0
12.0
/ pystysäde - arvo koskee kaikkia neljää kulmaa */ reunan säde : 15px 15% / 15px;/
/* vaakasuuntainen säde 1. arvo ylhäältä vasen ja alhainen oikea, toinen arvo ylhäältä oikea ja alhaalla vasen pystysäde - 1. arvo ylhäältä vasen ja alhainen oikea, toinen arvo ylhäältä oikea ja alhaalla vasen */ reunan säde: 10px 15% / 10px 40px;/
/* vaakasuuntainen säde 1. arvo ylhäällä vasen, toinen arvo ylhäällä oikea ja alavasen, kolmas arvo alhaalla oikea pystysäde - 1. arvo ylhäällä vasemmalla, toinen arvo ylhäällä oikealla ja alhaalla vasen, kolmas arvo alhaalla oikealla */ reunan säde : 15px 15% / 15px;/
reunan säde: 20px 15px 6em / 20px 25px 30%; pystysäde - 1. arvo ylhäältä vasen, toinen ylhäältä oikea, kolmas alaoikea, neljäs alavasen */ Object.style.borderRadius = "5px"
Kiinteistöjen arvot
CSS-versio CSS3
Peritty Ei.
Animoitu Käyttöesimerkki
