Utasítások - tippeket a CSS - létrehozását a blokk, lekerekített élekkel
Létrehozása egy blokk, lekerekített élekkel
Számos módszer, hogy megteremtse a lekerekített élek a blokk. Tekintsük néhány közülük:
1. megoldás: CSS3-border-radius tulajdonság
Van egy border-radius tulajdonság, amellyel megadhatja a mértéke gömbölyűségének a keret körül a blokk elem. Ez a tulajdonság szerepelni fog a CSS3 specifikáció, amikor a folyamat a fejlesztési befejeződött. Jelenleg szinte minden böngésző támogatja a border-radius tulajdonság. (Firefox 4.0+, Chrome4.0 +, Safari 5.0, Opera 10.5+ IE9 +).
Ezt megelőzően, a Safari és a Firefox fejlesztők végre kísérleti támogatást ez a lehetőség megteremtésével bővítmények tervezett konkrét böngészők.
-moz-border-radius: 25 képpont;
-WebKit átnyúló-sugár: 25 képpont;
Ez a megoldás működik a Firefox 4.0+ verzió, Chrome4.0 +, Safari 5.0, Opera 10.5+ IE9 +
Az alábbiakban egy HTML-CSS-kód és a feldolgozás eredményét ábrán látható. 9.21:
Ábra. 9.21. Blokk lekerekített élekkel, segítségével létrehozott CSS
Ebben a példában egy blokk lekerekített sarkokkal anélkül, hogy egyetlen kép már elkészült! Ezek tiszta sarkok keresztül lett létrehozva, a használata a következő tulajdonságokkal rendelkezik:
Ha eltávolítja az ingatlan a stíluslapot, akkor kap egy blokkot a megszokott derékszögben, ábrán látható. 9.22.
Hasonlóképpen, a blokk jelenik meg böngészők nem támogatják ezt a funkciót.
Ábra. 9.22. blokk véve a böngészők, amelyek nem támogatják a border-radius tulajdonság
DEMO - ha a böngészője támogatja a border-radius tulajdonság. látni fogja a blokk, lekerekített sarkokkal.
2. megoldás: Használja a képek (a változás a jelölésben)
A kívánt eredmény érhető el megváltoztatásával HTML-kód egy dokumentum, és adjunk hozzá több képet. Ebben az esetben a blokk jelenik meg, lekerekített élekkel a legtöbb böngészőben. Tehát először hozza létre a képet lekerekített sarkok egy grafikai program. Ezt legegyszerűbben úgy valósítható elosztjuk a kör négyfelé ábrán látható. 9.23. Minden sarkon képviseli egyetlen kis képre.
Ábra. 9.23. Kép lekerekített sarkok
Az alábbiakban egy jelölő dokumentum, amely már tartalmazza a kép felső és bal alsó sarok, beágyazva a felső és alsó elemek div:
corners2.html
A képek a jobb alsó és felső sarokban használják a háttérben a megfelelő elemek div class rndtop rndbottom és hozzáadták a megfelelő szabályok táblázatstílusok:
Ez a kombináció HTML-és CSS-kód létrehoz egy blokk, lekerekített sarkú, ábrán látható. 9.24.
Ábra. 9.24. Blokkolja lekerekített élek által létrehozott változó a HTML-jelölést, és adjunk hozzá képeket
Megadhatja minden stílus a készülék, miközben csak egy szabály: a belső párnázás mindig képpontban megadva. Az egyéb egységeket, mint például em, akkor a készülék nem működik megfelelően az Internet Explorer. A munka eredményeként ábrán látható. 9.25.
Az eredmény egy blokk látható. 9.26.
Ábra. 9.26. Létrehozása blokk lekerekített sarkokkal használata nélkül további képek vagy HTML-kód (DEMO)