Hogyan kerek sarkok CSS és HTML
Nagyon gyakran, webes tervezők munkáját megváltoztatja az alakját geometriai formák, képek, fotók, stb így lekerekített sarkokkal. Ez adja a projekt teljesség és szép design.
Vannak különböző módon lehet átalakítani a bonyolultsága a végrehajtása egy normális téglalap négyszög lekerekített sarkokkal. Megnézzük a két legnagyobb egyszerűen és gyorsan, és megtanulják, hogy nem a kép és a keret a kép körül, lekerekített sarkok a website design és weboldalakat:
1. lekerekített sarkok CSS és HTML-kódot a bejegyzés style.css stíluslap.
2. sarkok kerekítés HTML kódot anélkül írásmóddal fájlt.
3. Képek, lekerekített sarkokkal. A keret a kép körül HTML.
1. lekerekített sarkok CSS és HTML-kódot a bejegyzést a stíluslap style.css
Vegyük az első eljárás egy téglalap, lekerekített sarkokkal CSS és HTML-kódot a bejegyzés style.css stíluslap.
Mi az a CSS
CSS - Cascading Style Sheets van (Cascading Style Sheets - CSS), egy speciális kódot. Vele, akkor lehet változtatni a betűtípust. alakja és színe elemekkel. Az oldalak egy webes alkalmazás helyzetbe elemek közé háttérképeket. CSS3 legújabb verzióját a CSS fejlesztés.
Munka CSS és HTML kódok és fájlok egyszerű és megfizethető. A lényeg, hogy mindent nagyon lassan és óvatosan.
Készítsen téglalap kerettel CSS
Ábrázolni egy egyszerű online geometriai téglalap, meg kell leírni annak paramétereit: hosszúság, magasság, alakú, színes, a háttér színét a blokk, és ha szükséges, keretstílusokhoz (vastagság, szín, stb.) Mert ebben a formában a következő CSS egység, amely ismerteti stílusok (paraméterek) a téglalap:
A színkód megadott hexadecimális lehet hat karakterből áll (a teljes szám), vagy három karakter (rövidítve kód). Hogy csökkentse a színkódot is lehet abban az esetben, véletlen az első számjegy a második, harmadik, negyedik és ötödik-hatodik. Például # BB00CC rövidített kód felírható # b0c. A betűk A, B, C, D és F egy színkódot, kizárólag latinul.
Jelentés 3px a határ menti attribútum jelzi a szélessége a keret.
Miután belépett a fájlt style.css stílusok tudjuk mutatni a téglalap bárhol az oldalon. Ehhez helyezze a HTML tag azon a helyen, ahol megjelenik egy téglalap. A címke így néz ki:
Megjegyezzük, hogy a CSS stílusokat ez a szám kell feltüntetni a fájlt csak egyszer, és HTML-tag lehet helyezni korlátlan számú times online.
Ennek eredményeként a kibocsátó szerezni egy téglalapot a kerettel.
Hogyan lehet lekerekített sarkok CSS
Hogy kerek a sarkokat segítségével border-radius attribútumot.
Mi csak hozzá az attribútumot. Ez általában kijelzi az eredményt a kerekítés az újabb verziójú böngésző, de sok felhasználó még mindig a régebbi verziók, ahol ez a tulajdonság nem működik megfelelően. Ezért a kompatibilitás, akkor adjunk hozzá még néhány leírások attribútum közvetlenül össze van kötve adott böngészők, a mi blokk style.css fájlt, hogy a következő kódot:
HTML-div tag ad nekünk egy téglalap keretben lekerekített sarkok:
Hogyan szöveget egy keretben
A szállás egy téglalapot szövegének meg kell adni a CSS blokk attribútum szövegét francia széleihez padding. és HTML-címke tartalmazza a kívánt szöveget, például „pib9.ru”. Így CSS készülék a következő formában:
és HTML-tag a kérdés a szöveg fog kinézni:
Kapunk egy négyszög lekerekített sarkok és a szöveget:
Ha a kódot, hogy távolítsa el a szélesség és a magasság a téglalap méretét leírását attribútumokat. lehet kapni ezeket a formákat, lekerekített sarkok:
Ebben az esetben, hogy a forma közepes méretei: hosszúság mezőt megfelel a szélesség és a magasság változik, ahogy az öntőforma töltési tartalmát.
Kerekítés kiválasztott szögek
A leírásban a stílusok 10px paraméter attribútum azt jelzi, border-radius görbületi sugárral rendelkezik, amely változtatható kiválasztja a kívánt egy. Ha 0, a kerekítés fog bekövetkezni. Ez a tulajdonság kihasználni, amikor szükség van, hogy a kiválasztott sarkok kerekítés.
Írja ki az értékeket görbületi sugara minden mutató szög nulla, ha megszünteti a kerekítés. Például törli kerekítés a harmadik és negyedik sarkot. A kód így fog kinézni:
1. A bal felső sarokban.
2. A jobb felső sarokban.
3. jobb alsó sarkában.
4. A bal alsó sarokban.
Így kapjuk négyszög lekerekített kiválasztott csak a felső sarkokban.
Visszaszámlálás szögek az óramutató járásával megegyező irányba, kezdve a bal felső sarokban:
2. sarkok kerekítés HTML kódot anélkül írás stílusa fájl
Tekintsük a második Eljárás egy téglalap, lekerekített sarkokkal a HTML-kód használatával nélkül írásmóddal fájlt.
HTML lekerekített sarkok
Van egy kis funkció, amely tovább egyszerűsíti a teljes folyamatot - egy HTML lekerekített sarkokkal. A település kialakulását HTML kódot írt ugyanabban a stílusban, mint a kódok CSS. Ugyanazt a jellemzőkkel rendelkezik, mint a CSS blokk, és nincs szükség a felvételi egység style.css fájlt. Egy szó - teljesen kicseréli a kódot HTML CSS kódot.
Ahelyett, hogy a CSS blokk egy HTML script, ami be van helyezve a hely, ahol meg kell adni a lekerekített téglalap:
Az első módszer, hogy kerek a sarkokat lehet használni, ha egy és ugyanazon formában megváltoztatása nélkül stílusok egynél többször használják. A második módszer a formák, stílusok, amelyeket egyszer használható.
3. Képek, lekerekített sarkokkal. A keret a kép körül HTML
Azt is szeretné, hogy hasznos információkat. Gyakran használ képek website design. Nagyon szeretnék, hogy azok még szebb, megváltoztatja alakját, keretezés keret a gyönyörű színek és különböző szélességben. Ez felveti a kérdést: „Hogyan kerekíteni a sarkokat a kép?”.
Ez nagyon egyszerű, és most meg kell tanulni.
Fordítsa el a képet az oldalon, így a hátteret magának a háttérben div tag. Kapunk az alábbi kódot és a kép:
Az attribútum url ( „”) be egy linket a kép.
Fejezze be a sarkokat a képkeret azzal a kiegészítéssel,
Kerekítési a sarkokban CSS és HTML, és adjunk hozzá egy keret lehet tenni két módon, a fent leírtak szerint.
Az első módszer a jelen cikk kódot képeket a stílus fájl és a címke div HTML-kód jelenik meg az alábbiak szerint: