Hogyan készítsünk css lekerekített sarkokkal c segítségével border-radius
Köszöntelek az oldalon. Blogom főként az, hogy a technológia HTML és CSS, akkor hozzon létre webhelysablonok. Nagyon gyakran a fejlesztés szükséges, hogy kerek egy vagy több sarok a kívánt elemet. Ez használt tenni behelyezésével a megfelelő képet, de ma a css lekerekített sarkok, hogy sokkal könnyebb. Lássuk, hogyan.
Kerekítés a sarokban a blokk szintű elemek
Alapértelmezésben a blokk szögletes sarkok. Ez nem mindig kell tervezni - lekerekített gyakran gombok, menüpontok, sőt közös konténerek. És hála az új ingatlan - border-radius. Mielőtt a megjelenés kerekítés lehetne tenni útján css.
Ismét én fog mutatni a munka, mint példaként a hagyományos sárga blokk. A könnyebb én elem tér - 150 150 pixel. Megkérdezhetem blokkolják ezt a stílust:
Lássuk, hogyan kell változtatni a megjelenését.
Az elem 150-150 már jelentős kerekítés úgy, hogy jelentősen megváltozott az eredeti megjelenés.
Hogyan készítsünk egy tökéletes kör négyzet
Az érték a border-radius lehet állítani nem csak pixel, hanem százalékában. Ha kell kapcsolni a tér egy kört elem ahhoz, hogy írni ezt:
Csak akkor működik, ha ugyanazt a szélessége és magassága az elem. Ha más méretű, az elem szerez ovális alakú.
Kerekítés minden sarokban külön
CSS másik nagy lehetőség - kérni filé mindkét oldalon külön-külön. Ezt meg lehet tenni két módja van:
1. A tulajdonságok border-top-bal-sugár, határ-bal alsó-sugár, border-bottom-jobb-sugár, és a határ-jobb felső-sugár. Néha lehet használni, de ez sokkal kényelmesebb a második lehetőséget.
2. Ez a módszer, hogy hozzanak egy kerekítési egy tulajdonság border-radius, meghatározva négy értéket azonnal résen keresztül -, hogy a bal felső, jobb felső, bal alsó és a jobb alsó sarkok. Ebben a sorrendben - ez fontos.
Gyerünk, próbáljuk:
Így csak a felső sarkai le vannak kerekítve. Ha ehelyett a bal első két érték nulla, és a harmadik és negyedik kérném, akkor a kerekítés tűnik alsó sarkaiban. Felvétel és a következők lehetnek:
Ebben az esetben az első érték meghatározza a kerekítés a bal felső és a jobb alsó sarkot, a második - a jobb felső és bal alsó sarokban. Itt van egy érdekes logika.
Speciális funkciók
Tény, hogy az értékeket lehet rögzíteni a perjel. Alapértelmezett border-radius lekerekíti csak egy tengely mentén, és még mindig lehetősége van arra, hogy nem ez az a másik. Nézzük rögzíteni, mint ez:
És annyira aranyos transzformált blokk eredményeként ezen intézkedések.
Ennek megfelelően ebben az esetben is működik, recept minden kéz külön-külön.
Ez a helyzet, amikor jobb, hogy megpróbálja egyszer, mint százszor olvasni. Próbáld ki magad, poeksperementiruyte. Megjelenése elem függ az eredeti mérete, és milyen értékek kérdezed meg.
Csak egy figyelmeztetés: ha megpróbálja írni valamit, mint ez:
Úgy tűnik, hogy eleget - feljegyzett értékek mind a négy oldalról. De mit gondolsz, a blokk valahogy változtatni a megjelenését? Nem, mert a böngésző nem csak azért, mert Scriven elem. Így működnek az ingatlan, de ne vigyük túlzásba, mert akkor az összes ingatlan nem működik.
Tehát ez minden olyan információt, hogy szeretnék, ha elmondaná ma a kerekítés sarkok. Azt is szeretném megjegyezni, hogy az ingatlan megjelent változatában CSS 3. Ezért nem támogatja a régebbi böngészők. Internet Explorer támogatja a telken a tizedik változat.
Nos, beszéltünk ma, mint én az én css lekerekített sarkokkal. Remélem az információ hasznos volt az Ön számára.
Érdekes a világ helyszíni építési
Ön előfizetett. És köszönöm.