CSS-reunus: säde, väri, tyyli ja muut CSS-reunuksen ominaisuudet. raja-kuva-toisto. Luo puhekupla

SISÄÄN Viime aikoina Yritin ajatella uudelleen CSS-säännöt joita olen omaksunut käytännössäni. Kirjoitin suuri määrä koodia ilman todellista ymmärrystä siitä, miksi se toimii niin kuin se toimii.

Ratkaisin ongelmat tietyllä tavalla, yleisesti hyväksytyn käytännön perusteella. Mutta viime aikoina olen miettinyt, voinko selvittää ainakin suunnilleen syyn, miksi kaikki toimii niin kuin toimii?

Täydelliset piirit CSS:ssä

Yleinen suunnittelukuvio, jonka näemme usein verkkosivustoilla, on täydellinen ympyrä. Joskus ympyrällä on joitain värillinen tausta tai kuva taustaksi.

CSS-piirit Rdiossa, Dribbblessä ja Codecademyssa

Tämä temppu onnistuu usein CSS:n avulla rajan ominaisuuksia-säde. Ratkaisin tämän ongelman seuraavasti: loin neliön ja asetin reunan säteen arvoon 50%. En koskaan kyseenalaistanut miksi tehdä näin, hyväksyin vain sen, että jos asetan säteen puoleen neliön korkeudesta/leveydestä kaikissa kulmissa, saan ympyrän.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on neliö, jonka mitat ovat 150 x 150 pikseliä, muutetaan se ympyräksi asettamalla kunkin kulman säteeksi 50 %. W3C-standardin mukaisesti rajasäde-osiossa, prosenttiyksikköä reunasäde tarkoittaa elementin leveyttä ja korkeutta. Esimerkissäni elementin leveys/korkeus on 150 kuvapistettä, joten 50 % antaisi meille arvon 75 kuvapistettä.

Neliön muuntaminen ympyräksi CSS:ssä raja-säteen ominaisuudet(katso CodePenistä)

Miten rajasäde käytännössä toimii?

Joskus näen tämän suunnitteluidean toteutettuna asettamalla reunasäteen 100%. Tein itse saman projektissani muutama päivä sitten, ajattelematta sitä. Se näytti täsmälleen samalta, muodostaen täydellisen ympyrän. Mutta miksi?

Selain skaalaa myös kaikki muut kulmat, kunnes jokaisen kulman säde on 50 % ja meillä on oma ympyrämme. Vaikka määrität kullekin kulmalle 150 kuvapisteen säteen, lopputuloksena on 75 kuvapisteen säde, koska se on enimmäismäärä, jonka selain sallii kullekin kulmille.

Johtopäätös

Jos asetat reunasäteen 100 % elementin kaikille kulmille, selain toimii kulissien takana. lisätyö skaalata kulmia, kunnes ne kohtaavat. En ole varma, vaikuttaako kaikkien piireihisi reunasäteen asettaminen 100 prosenttiin suorituskykyyn.

Tekijä: vähintään, tämä vaikuttaa melko turhalta, jos tiedät etukäteen, että selain skaalaa säteen joka tapauksessa 50 %:iin. 50 %:n käyttö vaikuttaa oikealta päätökseltä.

Minun on aika korjata satunnaiset CSS-ominaisuudet, jotka olen lisännyt viime viikon aikana...

Tunnisteet: css, border-radius

Voit hallita elementin reunaa käyttämällä yleistä border-ominaisuutta. Tämän ominaisuuden avulla voit määrittää elementin reunuksen paksuuden, tyylin ja värin yhdessä ilmoituksessa.

Nämä kolme ominaisuutta (reunuksen paksuus, reunuksen tyyli ja väri) voidaan asettaa yhdessä ilmoituksessa. Tässä on esimerkki:

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

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

Mieti kuinka CSS-apua voit luoda seuraavanlaisen muodon:

Reunusarvot - paksuus, tyyli ja väri - voidaan asettaa erikseen erityisominaisuuksien avulla.

• border-style - reunatyyli.
• border-width - reunuksen leveys.
• border-color - reunuksen väri.

Tarkastellaan jokaista arvoa erikseen.

rajatyylinen omaisuus Reunuksen tyyli.

Reunustyylinen ominaisuus määrittää reunuksen tyylin. CSS:ssä sisään HTML-erot, elementin reuna ei voi olla vain kiinteä. Seuraavat arvot ovat sallittuja reunatyylille:

1. ei mitään - ei reunaa (oletus).
2. kiinteä - kiinteä reuna.
3. kaksoisreuna.
4. katkoviiva - katkoviiva.
5. pisteviiva - pisteiden sarjasta tehty reunus.
6. harjanne - "harjanteen" reuna.
7. ura - "uran" reuna.
8. upotettu reunus.
9. alku - suulakepuristettu reuna.

Esimerkkejä miltä ne näyttävät.

ei reunaa (ei mitään)

kiinteä reuna

kaksoisreuna

pistesarjan reuna (pisteviiva)

katkoviiva

uran reuna

harjanteen reuna

sisennetty reuna (umpi)

puristettu reuna (alku)

Muuten, jos asetat reunan väriksi harjanteen kehyksen mustaksi, saat tämän tuloksen.

Div-lohko mustalla reunuksella ja harjanteella.

Kehys näyttää kiinteältä, mutta tämä johtuu siitä, että harjanteen tyyli luodaan lisäämällä musta varjotehoste, eikä musta vaikutus näy mustassa kehyksessä.

Avulla rajatyylisiä ominaisuuksia Reunuksen tyyliä voidaan asettaa paitsi lohkon kaikille puolille. On mahdollista asettaa useita arvoja yhdelle reunatyyliselle ominaisuudelle arvojen lukumäärästä riippuen, rajatyyli määritetään eri numero lohkon sivut. Voit asettaa yhden, kaksi, kolme tai neljä arvoa. Katsotaanpa esimerkkejä kustakin tapauksesta.

Yksi arvo (kiinteä) - reunatyyli asetetaan lohkon kaikille puolille.

Kaksi arvoa (kiinteä kaksinkertainen) - ensimmäinen arvo asettaa tyylin ylä- ja alapuolelle, toinen sivulle.

Kolme arvoa (kiinteä kaksoispiste) - ensimmäinen arvo yläpuolelle, toinen sivuille, kolmas alapuolelle.

Neljä arvoa (kiinteä kaksinkertainen katkoviiva) - jokainen arvo yhdelle puolelle myötäpäivään alkaen ylhäältä.

Rajanleveys omaisuus. Reunan paksuus.

Voit määrittää elementin reunuksen leveyden käyttämällä border-width -ominaisuutta. Reunuksen paksuus voidaan asettaa mihin tahansa absoluuttiset yksiköt mittaukset, esimerkiksi pikseleinä.

Kuten rajatyylisen ominaisuuden, ominaisuuden arvoksi voidaan määrittää yhdestä neljään. Katsotaanpa esimerkkejä kustakin tapauksesta.

Esimerkkikoodi:

Myös rajanleveysominaisuuden osalta on arvot muodossa avainsanoja. Niitä on yhteensä kolme:

• ohut - ohut reuna;
• keskimääräinen - keskimääräinen paksuus;
• paksu - paksu reuna;

Reunuksen paksuus: ohut.

Reunan paksuus: keskikokoinen.

Reunan paksuus: paksu.

Reunusväriominaisuus. Reunuksen väri.

Voit hallita reunuksen väriä käyttämällä reunavärityökalua. Tämän ominaisuuden värit voidaan asettaa millä tahansa menetelmällä, joka on kuvattu artikkelissa "Värit CSS:ssä", nimittäin:

• Värin heksadesimaalimerkintä (#ff00aa).
• RGB-muoto- rgb(255;12,110) . RGBA-muoto CSS3:lle.
• HSL-muodot ja HSLA CSS3:lle.
• Värin nimi, esimerkiksi musta. Täysi lista Värien nimet on annettu CSS-värien nimitaulukossa.

Reunusväri-ominaisuudella voi myös olla yhdestä neljään arvoa ja se käsittelee niitä samalla tavalla kuin edelliset ominaisuudet.

Yksi arvo (punainen).

Kaksi arvoa (punainen musta).

Kolme arvoa (punainen musta keltainen).

Neljä arvoa (punainen musta keltainen sininen).

Palataan nyt yllä mainittuun ongelmaan ja piirretään kuvio:

Tässä on koodi, joka piirtää tällaisen kuvion, vain suurempana:

Sivujen arvojen asettaminen erikseen

Yllä mainittiin, että voit määrittää rajan ominaisuusarvot vain lohkon yhdelle puolelle. Näitä tarkoituksia varten on kiinteistöjä:

• reuna-yläosa
• raja-oikea (oikea reuna)
• raja-ala
• border-left (vasen reuna)

Haluan muistuttaa, että kaikille ominaisuuksille on määritetty kolme arvoa (paksuus, tyyli ja väri) missä tahansa järjestyksessä. Mutta on ominaisuuksia, joiden avulla voit asettaa paksuuden, värin ja tyylin kummallekin puolelle erikseen. Näiden ominaisuuksien kirjoitus on johdettu yllä olevasta.

Yläreunuksen vaihtoehdot (reuna-yläosa).

• border-top-color - määrittää elementin yläreunuksen värin.
• border-top-width – määrittää elementin yläreunan paksuuden.
• border-top-style - määrittää elementin yläreunuksen tyylin.

Oikean reunan vaihtoehdot (reuna-oikea).

• border-right-color - määrittää elementin oikean reunan värin.
• border-right-width - määrittää elementin oikean reunan paksuuden.
• border-right-style - määrittää elementin oikean reunan tyylin.

Alareunan vaihtoehdot (reuna-ala).

• border-bottom-color - määrittää elementin alareunuksen värin.
• border-bottom-width - määrittää elementin alareunan paksuuden.
• border-bottom-style - määrittää elementin alareunuksen tyylin.

Vasemman reunan vaihtoehdot (reuna-vasen).

• border-left-color - määrittää elementin vasemman reunan värin.
• border-left-width - määrittää elementin vasemman reunan paksuuden.
• border-left-style - määrittää elementin vasemman reunan tyylin.

Esimerkki näiden ominaisuuksien käytöstä:

Raja-säteen omaisuus. Reunuskulmien pyöristäminen.

border-radius-ominaisuus on tarkoitettu pyöristämään elementin reunojen kulmat. Tämä ominaisuus ilmestyi CSS3:ssa ja toimii kaikin puolin oikein nykyaikaiset selaimet, takana nettiä lukuun ottamatta Explorer 8 (ja vanhemmat versiot).

Arvot voivat olla mitä tahansa CSS:ssä käytettyjä numeroita.

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Jos lohkokehystä ei ole määritetty, fileointi tapahtuu taustan kanssa. Tässä on esimerkki pyöristetystä lohkosta ilman reunaa, mutta taustavärillä:

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Elementin jokaisen kulman pyöristämiseen on ominaisuuksia. Tämä esimerkki käyttää niitä kaikkia:

Reunus-ylävasen-säde: 15px; raja-ylä-oikea-säde: 0; reunus-ala-oikea-säde: 15px; raja-ala-vasen-säde: 0;

Reunuksen säteen ominaisuus: 15 kuvapistettä.

Vaikka tämä koodi voidaan kirjoittaa yhteen ilmoitukseen: border-radius : 15px 0 15px 0 . Tosiasia on, että border-radius-ominaisuus voidaan asettaa yhdestä neljään arvoon. Alla olevassa taulukossa esitetään säännöt, jotka koskevat tällaisia ​​ilmoituksia.

Kun olet tutkinut tämän taulukon huolellisesti, voit ymmärtää sen parhaiten lyhyt huomautus haluttu tyyli on seuraava: border-radius : 15px 0 . On vain kaksi merkitystä.

Vähän harjoittelua

Sitruunan piirtäminen CSS:llä.

Tässä on koodi tällaiselle lohkolle:

Marginaali: 0 auto; /* Keskitä lohko */ leveys: 200px; korkeus: 200px; tausta: #F5F240; reuna: 1px kiinteä #F0D900; reunan säde: 10px 150px 30px 150px;

Olemme jo piirtäneet kuvion:

Jätetäänpä siitä nyt kolmio:

Kolmion koodi on:

Marginaali: 0 auto; /* Aseta lohko keskelle */ täyte: 0px; leveys: 0px; korkeus: 0; reunus: 30px tasainen valkoinen; reuna-ala-väri: punainen;

CSS3 kehys laajentaa kykyä muotoilla elementtien reunoja ominaisuuksilla, jotka sallivat kulmien ympäri elementtiä ja myös käyttöä Kuvat elementin reunojen suunnitteluun.

Pyöristetyt kulmat ja kuvakehykset

1. Kulmien pyöristys reunasäteellä

Selaimen tuki

IE: 9.0
Firefox: 4.0
Kromi: 4.0
Safari: 5.0, 3.1 -verkkopaketti-
Ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: —
Android-selain: 4.1
Kromi Androidille: 44

Ominaisuuden avulla voit pyöristää pienten ja pienten kirjainten kulmia lohkon elementtejä. Kunkin kulman käyrä määritellään yhdellä tai kahdella sen muodon määrittävällä säteellä − ympyrä tai ellipsi. Säde koskee koko taustaa, vaikka elementillä ei olisi reunuksia, tarkka sijainti Sekantti määritetään background-clip-ominaisuuden avulla.

Rajaussäde-ominaisuuden avulla voit pyöristää kaikkia kulmia kerralla, ja käyttämällä border-top-vasen-säde, border-top-right-radius, border-bottom-right-radius, border-bottom-vasen säde ominaisuuksia voi pyörittää jokaisen kulman erikseen.

Jos asetat kaksi arvoa border-radius-ominaisuudelle, ensimmäinen arvo pyöristää ylävasen Ja oikeassa alakulmassa ja toinen - Yläoikea Ja alhaalla vasemmalla.

Arvot määritetään / määrittää vaakasuoraan Ja pystysuorat säteet. Omaisuutta ei ole peritty.

Vaihtoehdot

Div (leveys: 100px; korkeus: 100px; reunus: 5px kiinteä;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-säde: 10px 20px ;) .r4 (border-radius: 10px/20px;) .r5 (border-säde: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (border-säde: 10px 20px 0x3p7) border-radius: 50%;).r8 (reunus-ylä: ei mitään; border-bottom: ei mitään; border-radius: 30px/90px;).r9 (border-bottom-vasen-säde: 100px;).r10 (border) -säde: 0 100%;).r11 (reunuksen säde: 0 50% 50% 50%;).r12 (reuna-ylä-vasen-säde: 100% 20px; reunus-alha-oikea-säde: 100% 20px ;)
Riisi. 1. Esimerkkejä erilaisia ​​vaihtoehtoja pyöristää lohkon kulmat

2. Reunakuva

Selaimen tuki

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Kromi: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Ooppera: 15.0, 11.0 -o-
iOS Safari: 7.1
Ooppera Mini: 8 -o-
Android-selain: 4.4, 4.1 -verkkopaketti-
Chrome Androidille: 42

Ominaisuuden avulla voit asettaa kuvan elementin reunukseksi. Kuvan päävaatimus on, että sen on oltava symmetrinen. Ominaisuus sisältää seuraavat arvot: (border-image: leveys lähdeviipaleen toiston alkuun;) .

Tämän avulla yksinkertainen kuva Voit saada nämä kehykset elementille.

/* Esimerkki 1 */ div ( leveys: 260px; korkeus: 100px; reunuksen tyyli: kiinteä; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; 2 Esimerkki 2 png); border-image-slice: 30 border-image-repeat: round);
Riisi. 2. Esimerkki lohkorajojen suunnittelusta kuvan avulla

Leikkaukset A - B - C - D muodostavat rungon kulmat, ja niiden välissä oleva kuvion osa täyttää rungon jäljellä olevan tilan kehyksen mukaisesti. annettu arvo border-image-repeat-ominaisuudet. Kulman koko (in tässä esimerkissä tämä on numero 30) on määritetty käyttämällä border-image-slice -ominaisuuden arvoa.

2.1. raja-kuvan leveys

Ominaisuus määrittää kuvan leveyden elementin reunalle. Jos leveyttä ei ole määritetty, se on oletuksena 1.

raja-kuvan leveys
Arvot:
pituus	Asettaa reunuksen leveyden pituusyksiköissä - px/em. Voit asettaa yhdestä neljään arvoa kerrallaan. Jos yksi arvo on määritetty, niin kehyksen kaikkien sivujen leveys on sama, kaksi arvoa määrittävät ylhäältä alas ja oikealta vasemmalle jne.
määrä	Numeerinen arvo, jolla reunan leveyden arvo kerrotaan.
%	Elementin kehyksen leveys lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
auto	Vastaa border-image-slice -arvoa.
alkukirjain
periä

Syntaksi

Div (reunuksen kuvan leveys: 30 pikseliä;) Kuva. 3. Esimerkki kuvakehyksen leveyden asettamisesta käyttämällä erilaisia ​​tyyppejä arvot

2.2. border-image-source

Ominaisuus määrittää polun kuvaan, jota käytetään koristamaan lohkon reunoja.

Syntaksi

Div (border-image-source: url(border.png);)

2.3. border-image-slic -elementit

Ominaisuus määrittää elementin reunojen määrittämiseen käytettyjen kuvaosien koon ja jakaa kuvan yhdeksään osaan: neljään kulmaan, neljään kulmien väliseen reunaan ja keskiosaan.

Arvot:
määrä	Runko-osien koko voidaan asettaa yhdellä, kahdella, kolmella tai neljällä arvolla. Yksi arvo asettaa rajat sama koko elementin kummallekin puolelle. Kaksi arvoa: ensimmäinen määrittää ylä- ja alareunojen koon, toinen - oikean ja vasemman reunan koon. Kolme arvoa: ensimmäinen määrittää yläreunan koon, toinen - oikea ja vasen ja kolmas - alareunus. Neljä arvoa: Määrittää ylä-, oikea-, ala- ja vasemman reunan koot. Numeerinen arvo edustaa kuvapisteiden määrää.
%	Reunusten koot lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
täyttää	Arvo ilmoitetaan yhdessä numeron tai prosentin kanssa. Jos määritetty, kuvaa ei leikkaa kehyksen sisäreuna, vaan se täyttää myös kehyksen sisällä olevan alueen.
alkukirjain	Asettaa tämän ominaisuuden oletusarvoon.
periä	Perii tämän ominaisuuden arvon emoelementiltä.

Syntaksi

Div (reunakuva: 50 20;)
Riisi. 4. Esimerkki kuvakehysosien määrittämisestä

2.4. raja-kuva-toisto

Kiinteistöjen hallintapaneelit taustakuva tilaa kehyksen kulmien väliin. Voidaan määrittää käyttämällä joko yhtä arvoa tai arvoparia.

Syntaksi

Div (border-image-repeat: toista;) Kuva. 5. Esimerkki kuvakehyksen keskiosan toistamisesta käyttämällä erilaisia ​​arvoja

2.5. border-image-outset

Ominaisuuden avulla voit siirtää kuvakehystä elementin rajojen ulkopuolelle määritetyn pituuden verran. Voidaan määrittää käyttämällä yhtä tai neljää arvoa.

Syntaksi

Div (reunus-kuva-alku: 10px;)
Riisi. 6. Esimerkki kuvakehyksen siirtämisestä erityyppisten arvojen avulla

3. Ulkokehyksen poikkeama ääriviiva-offset

Ominaisuus määrittää border-elementin reunuksen ja outline-ominaisuuden avulla luodun ulkoreunuksen välisen etäisyyden.

/*Kuva 1:*/ img ( reunus: 1px tasainen vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 3px; ) /*Kuva 2:*/ img ( reunuksen leveys: 1px 10px; reunuksen tyyli: kiinteä; reunan väri: vaaleanpunainen: 1px katkoviiva-offset: 3px;
Riisi. 7. Esimerkki kuvan sisustamisesta ulkokehyksellä

4. Gradienttikehys

Reunuskuvan arvo voi olla paitsi kuva, myös gradienttitäyttö.

Läpinäkyvä kehys

Läpinäkyvä on yksi väreistä. Tällä tavalla voit asettaa rajat elementin kaikille sivuille kerralla tai erikseen kullekin sivulle. Reunan paksuutta ohjaa rajan leveysominaisuus.

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; tausta: #00E4F6; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä rajakuva: lineaarinen gradientti (oikealle, läpinäkyvä 0%, #ADF2F7 100%);

Postikuori

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä; reunuskuva: 10 toistuvaa lineaarista gradienttia (45 astetta, #A7CECC, #A7CECC 10px, läpinäkyvä 10px, läpinäkyvä 20px, #F8463F 20px, #F8463F 30px, läpinäkyvä 30px, läpinäkyvä 40px)

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

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

Aluksi sanon muutaman sanan tilanteesta raja-säde kun uusia selainversioita julkaistaan.

Ensinnäkin 4 FireFox versio 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 käyttöönotto 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 vain leikata kaksi kulmaa, kuten esimerkissä, tulet pettymään. Kaareva kulma ei voi tehdä sitä. Se voi pyöristää vain lohkon kaikkia kulmia ja samalla sädearvolla. Kulmia, joilla on eri kaarevuussäteet, ei voida saavuttaa. Oikea ja toimiva versio näyttää tältä:

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

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

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

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

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

CSS3 PIE

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

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

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

Silti kärpänen

Valitettavasti kumpikaan CSS3 PIE tai Curved-corner eivät pysty tukkimaan kaikkia halkeamia. Esimerkiksi, pyöreät kulmat et saa niitä elementtejä, 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.

Tiedossani on vielä yksi puute. Reunussäteen käyttäminen elementtiin, kun hiiri vie sen päällä, 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 tässä esimerkissä pitäisi olla valitsin A, jolla on myös raja-säde ja reuna määritetty:

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

Tulokset

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