• Jak zaoblit rohy v CSS a HTML. Zaoblení rohů obrázků. Zaoblené rohy pomocí CSS

    Vezměte prosím na vědomí, že styly CSS pro tento tvar se do souboru zadávají jednou a značku HTML lze na web umístit neomezeně mnohokrát.

    V důsledku vydání dostaneme obdélník s rámem.

    Jak vytvořit zaoblené rohy v CSS

    Atribut se používá k zaoblení rohů. hraniční poloměr.

    Mohli jsme přidat pouze tento atribut. Zobrazuje výsledek zaokrouhlení normálně v nových verzích prohlížečů, ale mnoho uživatelů má stále staré verze, kde tento atribut nefunguje správně. Z důvodu kompatibility proto do našeho bloku v souboru Style.css přidáme několik dalších popisů tohoto atributu, svázaných přímo s určitými prohlížeči, a výsledkem bude následující kód:

    HTML tag div nám dá zaoblený rámovaný obdélníka rohy:

    a značka HTML pro výstup textu bude vypadat takto:

    pib9.ru

    Dostaneme zaoblený obdélník a text:

    Pokud z kódu odeberete atributy popisu velikosti obdélníku šířka A výška, můžete získat následující tvary se zaoblenými rohy:

    1. Žádný text

    V tomto případě formuláře nabývají rozměrů prostředí: délka odpovídá šířce pole a výška se mění, jak se formulář plní obsahem.

    Zaoblení vybraných rohů

    V popisu stylů parametr 10px v atributu hraniční poloměr ukazuje poloměr zakřivení, který lze změnit výběrem požadovaného. Pokud je nastaveno na 0, zaokrouhlování nebude probíhat. Tuto vlastnost lze použít, když je potřeba zaoblit vybrané rohy.

    Zapišme si hodnoty poloměru zaoblení pro každý roh s uvedením nul, kde zaoblení zrušíme. Zrušíme například zaoblení ve třetím a čtvrtém rohu. Náš kód bude vypadat takto:

    1. Levý horní roh.

    2. Pravý horní roh.

    3. Pravý dolní roh.

    4. Levý dolní roh.

    Výsledkem je obdélník s vybraným zaoblením pouze v horních rozích.

    Úhly se počítají ve směru hodinových ručiček, počínaje od levého horního rohu:

    2. Zaoblení rohů pomocí HTML kódu bez zápisu do souboru stylu

    Zvažme druhý způsob, jak získat obdélník se zaoblenými rohy pomocí HTML kódu bez zápisu do souboru stylu.

    HTML zaoblené rohy

    Existuje jedna drobná funkce, která celý proces ještě více zjednodušuje – to je HTML zaoblené rohy. Spočívá ve vytvoření HTML kódu, ve kterém jsou zapsány stejné styly jako v CSS kódech. To používá stejné atributy jako blok CSS a eliminuje potřebu zapisovat blok do souboru Style.css. Jedním slovem zcela nahrazujeme kód CSS kódem HTML.

    Místo našeho CSS bloku získáme HTML skript, který vložíme na místo, kde se má zobrazovat obdélník se zaoblenými rohy:

    První způsob zaoblení rohů lze použít, když je stejný tvar použit více než jednou beze změny stylů. Druhá metoda se používá pro formuláře, jejichž styly jsou použity jednou.

    3. Obrázky se zaoblenými rohy. Rám kolem obrázku HTML

    Chci vám také poskytnout užitečné informace. Často pomocí obrázky pro návrh webových stránek, opravdu je chci udělat ještě krásnější změnou jejich tvaru, orámováním rámem krásné barvy a různých šířek. To vyvolává otázku: „ Jak zaoblit rohy obrázku?”.

    To se provádí velmi jednoduše a nyní se naučíme, jak to udělat.

    Umístěme obrázek na web a udělejme z něj pozadí jako tag div na pozadí. Získáme následující kód a obrázek:

    Zaoblení rohů obrázku s okrajem

    Zaoblení rohů obrázků v CSS a HTML a přidání ohraničení lze provést jedním ze dvou výše popsaných způsobů.

    Při použití první metody tohoto článku by kódy obrázků pro soubor stylu a značku div HTML vypadaly takto:

    Vezměte prosím na vědomí, že některé atributy lze přidat do souboru stylu a některé do tagu div. V našem případě se do HTML kódu vloží šířka a výška obrázku.

    HTML kód pro druhou metodu bez použití souboru stylu popsaného v tomto článku vypadá takto:

    V důsledku fungování kódů každé ze dvou metod získáme stejný výsledek - obrázek se zaoblenými rohy:

    Tradiční pravoúhlé rohy v designu webových stránek už dávno všechny omrzely. V módě jsou zaoblené rohy, které se dělají nikoli pomocí obrázků, ale prostřednictvím stylů, pro které se používá vlastnost border-radius. Tato vlastnost může mít jednu, dvě, tři nebo čtyři hodnoty oddělené mezerami, které určují poloměr všech rohů nebo každého jednotlivě.

    V tabulce. 1 ukazuje jiný počet hodnot a typ bloku, který je v tomto případě získán.

    Kód Popis Pohled
    div ( border-radius: 10px; ) Poloměr zaoblení pro všechny rohy najednou.
    div ( border-radius: 0 10px; ) První hodnota nastavuje poloměr levého horního a pravého dolního rohu, druhá hodnota nastavuje pravý horní a levý dolní roh.
    div ( border-radius: 20px 10px 0; ) První hodnota nastavuje poloměr levého horního rohu, druhá hodnota nastavuje současně poloměr pravého horního a levého dolního rohu a třetí hodnota nastavuje pravý dolní roh.
    div ( border-radius: 20px 10px 5px 0; ) Postupně nastavuje poloměr levého horního rohu, pravého horního, pravého dolního a levého dolního rohu.

    Příklad 1 ukazuje, jak vytvořit blok se zaoblenými rohy.

    Příklad 1. Blokové rohy

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Poloměr

    Já je suplativní forma akuzativu z I.

    Výsledek tohoto příkladu je znázorněn na Obr. 1.

    Rýže. 1. Blok se zaoblenými rohy

    Zajímavého efektu lze dosáhnout nastavením poloměru zaoblení na více než polovinu výšky a šířky prvku. V tomto případě získáte kruh. Příklad 2 ukazuje, jak vytvořit kulaté tlačítko s obrázkem.

    Příklad 2: Kulaté tlačítko

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Knoflík

    Výsledek tohoto příkladu je znázorněn na Obr. 2.

    Rýže. 2. Kulaté tlačítko

    V prohlížeči Opera zaokrouhlení na

    Přečtěte si více: