Domov › Tarify › Rámy se zaoblenými rohy. Border-radius: Zaoblené rohy v CSS. border-image-source

Rámy se zaoblenými rohy. Border-radius: Zaoblené rohy v CSS. border-image-source

V předchozí lekci jsme se naučili, jak nastavit ohraničení prvku. Podívali jsme se také na vlastnosti jako border-color a border-style , pomocí kterých si můžete přizpůsobit barvu a styl ohraničení. Všechny naše rámy však vyšly s pravými úhly. Nyní si ukážeme, jak vytvořit zaoblené rohy v CSS pro okraje.

Jak zaoblit rohy: CSS3 vlastnost border-radius

Zaoblení rohů v CSS lze provést pro jakýkoli prvek na stránce HTML. Chcete-li to provést, musíte se na něj přihlásit vlastnost border-radius s odpovídajícím významem. Nejčastěji se hodnota uvádí v pixelech, ale lze použít i jiné jednotky, jako je em nebo procenta (v druhém případě je výpočet vztažen k šířce bloku).

Účinek této nemovitosti bude patrné pouze v případě, že stylizovaný prvek má barevné pozadí a/nebo ohraničení. Například:

BorderElement ( barva pozadí: #EEDDFF; ohraničení: 6px plné #7922CC; okraj-rádius: 25px; )

Výše popsaný styl poskytne na prvku následující výsledek

velikost 200x200 pixelů:

Můžete také udělat zaoblené hrany pouze pro horní nebo spodní rohy prvku, nebo každému rohu dejte jiný poloměr zaoblení - dostatek prostoru pro fantazii! Příklad:

BorderElement ( background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; ) .borderElement1 ( background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; )

Ale to není vše: místo jednoduchých zaoblených rohů můžete zadat eliptické zaoblení. Chcete-li to provést, budete muset zadat dvě hodnoty oddělené lomítkem (pro horizontální a vertikální poloosy elipsy). Uveďme příklad na bloku 150x450 pixelů:

BorderElement ( barva pozadí: #EEDDFF; okraj: 6px plný #7922CC; poloměr okraje: 280px/100px; )

Hodnoty můžete kombinovat (tj. použít běžné i eliptické zaoblené ve stejném stylu) a můžete také přidat osobní styl pro každý roh pomocí příslušných vlastností:

border-top-left-radius - pro levý horní roh;
border-top-right-radius - pro pravý horní roh;
border-bottom-left-radius - pro levý dolní roh;
border-bottom-right-radius - pro pravý dolní roh.

Princip zaoblení rohů

Obrázek níže ukazuje, jak se v CSS počítá zaoblení rohů. Pokud je tedy pro úhel zadána jediná hodnota – například 20 pixelů – znamená to, že k zaoblení dojde podél kruhu o poloměru 20 pixelů. V případě, že jsou zadány dvě hodnoty oddělené lomítkem, například 30px/20px , budou rohy zaobleny podél elipsy. První hodnota je v tomto případě délka vodorovné poloosy elipsy - 30px a druhá hodnota je délka svislé poloosy - 20px:

Vlastnictví CSS border-radius podporovaný všemi moderní verze prohlížeče.

Na internetu je mnoho příkladů a návodů pro zaoblení rohů bloku nebo stolu, ale tyto návody jsou zpravidla založeny na použití obrázků nebo na použití dalších bloků.

V dnešním tutoriálu vám ukážu, jak na to rohy kulatého stolu pouze pomocí CSS.

Přímé označení (Druhá tabulka se liší rozložením buněk v horní řádek):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam.	eleifend.

Pellentesque cursus, nunc ut facilisis hendrerit

1. Zaoblete rohy přímo u stolu (tag na stůl).

BContentTables( border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; ; margin:0,7em auto ;

2. Odstraňte jakékoli pozadí z prvního řádku.

Tr.bCTable_Header (pozadí: žádné;) 3. Pomocí pseudotřídy:první dítě a kombinátoru > vyberte první buňku v tabulce. Zaokrouhlete levou u první buňky horní roh

. Pozadí prvního řádku se skládá z pozadí buněk tohoto řádku.

Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; barva pozadí:#00843C ;)

Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0;

5. Zaoblete spodní rohy posledního řádku. Nezapomeňte odstranit pozadí z posledního řádku; Pozadí řádku je nastaveno pozadím buněk posledního řádku.

BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-poloměr-ohraničení:0 0 10px 10px; -khtml-poloměr-okraje: 0 0 10px 10px;

6. Poté analogicky podle bodů 3-4 v posledním řádku zaoblíme rohy první a vnější buňky.

BContentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px;) . bContentTables tr:last-child td:last-child (poloměr okraje:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- poloměr:0 0 10px 0; -o-poloměr-okraj:0 0 10px 0;

Podpora prohlížeče

Zaoblené rohy v CSS lze provést mnoha způsoby, velmi mnoha, a některé z nich lze považovat za zastaralé, protože CSS 3 zavedlo nové vlastnosti, které vám umožňují zaoblit rohy prvků HTML. Za prvé však staré prohlížeče tyto vlastnosti nepodporují a za druhé se v kreativním mozku designéra někdy rodí takové nápady, které dokážou zachránit jen staré metody. Proto se zde podíváme na několik různých možností pro vytváření zaoblených rohů v CSS: od nejjednodušších po poměrně složité.

V těchto příkladech jsou rohy zpočátku zaoblené blokové prvky, také v některých příkladech jsou tyto bloky použity jako pomocné prvky. Pamatujte však, že totéž můžete snadno provést s prvky na úrovni řádků a v případě potřeby jim přiřadit hodnotu bloku nebo vloženého bloku.

Zaoblené rohy v CSS 3 bez obrázků

Tento příklad využívá vlastnosti z CSS 3, které vám umožňují snadno zaoblovat rohy bez pomoci obrázků.

Příklad HTML a CSS: Zaoblení rohů pomocí pomocí CSS 3 žádné obrázky

webové stránky - Zaoblení rohů pomocí CSS 3 bez použití obrázků

Blokovat obsah.

Popis příkladu

Pro zaoblení rohů používáme vlastnost CSS 3, které rozumí všechny moderní prohlížeče.
Pro staré lidi Prohlížeče Firefox, Chrome a Safari používají speciální vlastnosti s předponami -moz- a -webkit- , které se objevily předtím, než podporovaly hlavní vlastnost. Bohužel pro stará opera a IE č podobné analogy. Upozorňujeme, že při vytváření složitých křivek nemusí vlastnosti s předponami fungovat správně. Proto byly v kódu CSS uvedeny výše než vlastnost main, takže podle stylové priority, používaly to prohlížeče, které už rozumí "čistému".

Vlastnosti s předponami nejsou ve specifikaci CSS, takže jejich použití bude mít za následek neplatný kód.

Zaoblené rohy v CSS bez obrázků

Tento příklad také nemá obrázky, ale používá další bloky. Podstata metody spočívá v tom, že před a za hlavním obsahem je označeno několik bloků, které, jak se od něj vzdalují, postupně zmenšují šířku pomocí bočních vnějších okrajů. Díky tomu dochází k imitaci zaoblení rohů.

Tato metoda je špatná, protože kód je „zasypaný“ dalšími bloky, ale bohužel v mnoha příkladech takové bloky budou přítomny. Další nevýhodou je, že s velkými poloměry zakřivení budete muset přidat ještě více bloků, než je použito v příkladu.

Příklad HTML a CSS: Zaoblení rohů bez použití obrázků

web - Zaoblování rohů v CSS bez obrázků

Blokovat obsah.

Popis příkladu

Uvnitř bloku s class = "block" označujeme prvek pro hlavní obsah ("content_block"), před který umísťujeme bloky pro simulaci zaoblení rohů ("b1" , "b2" , "b3" ). Poté je položíme stejně, ale v opačném pořadí.
Simulační bloky nastavíme na požadovanou výšku a boční okraje (CSS), abychom vytvořili vzhled rohů. Také jsme resetovali jejich velikost písma (CSS) a nastavili ji na :hidden - to je určeno pro starší prohlížeče, které mohou zvětšit výšku a zvětšit ji, než je uvedeno.
V tomto příkladu byla kromě zaoblení rohů přidána také imitace rámu, pokud ji nepotřebujete, pak jednoduše odstraňte všechny „okraje“ z prvků a odstraňte barvu pozadí z „b3“; blok.

Nejjednodušší způsob, jak v CSS zobrazit zaoblené rohy, je použít obrázek jako pozadí prvku. V tomto případě jsou rozměry prvku obvykle zadány stejně jako velikost obrázku na pozadí. Nevýhodou této metody je, že obsah prvku by neměl přesahovat jeho rozsah, to znamená, že by měl mít určitou omezenou velikost.

Příklad HTML a CSS: Zaoblení rohů pomocí jednoho obrázku

web - Zaoblení rohů v CSS pomocí obrázku

Popis příkladu

Pomocí vlastnosti CSS nastavíme obrázek pozadí pro blok, jehož replikaci svisle a vodorovně zakazujeme (no-repeat), protože v tomto případě to není vyžadováno.
Aby se text uvnitř bloku nedotýkal jeho okrajů, nastavili jsme jeho výplň (CSS) na 5px na každé straně.
Dále je potřeba nastavit blok na stejné rozměry jako pozadí. Náš obrázek na pozadí má rozměry 140x32 pixelů, ale udáváme šířku (CSS) a výšku (CSS) samotného bloku zmenšené o 10px. Musel jsem to zmenšit kvůli stejným vnitřním výplním, které také rozšiřují prvek o 5px v každém směru.

V předchozím příkladu byla velikost bloku pevná a závisela na velikosti obrázku na pozadí, což je velmi nepohodlné. Nyní změníme šířku našeho bloku. Chcete-li to provést, vystřihněte tři části obrázku - strany a kousek středu. Poté do hlavního bloku umístíme dva prvky s pevnými rozměry, které se díky absolutnímu polohování umístí na jeho boky. Dejme jim stejné boční části jako pozadí a centrální část pro hlavní blok. Získáme tak blok se zaoblenými rohy a proměnnou šířkou.

Tato technika se velmi často používá k zaokrouhlení jednořádkových prvků, jako jsou odkazy nebo názvy sekcí/menu.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních bloků

webové stránky - Zaoblení rohů v CSS pomocí bočních bloků

Hlavní obsah.

Popis příkladu

Do třídy bloku = "blok" umístíme dva prvky - "left_bok" a "right_bok", kterým nastavíme obrázky bočních částí jako pozadí (CSS) a zakážeme jejich reprodukci (no-repeat). Pro samotný hlavní blok nastavíme pozadí z centrální části a umožníme jej duplikovat pouze horizontálně (repeat-x).
U bočních bloků udáváme šířku odpovídající velikosti pozadí pro nás je to 14x32 pixelů. Ale pro hlavní blok, stejně jako v předchozím příkladu, nastavíme výšku na 22px, abychom kompenzovali vertikální odsazení.
Naše boční stěny umístíme relativně k "bloku", takže pro něj určíme :relative a absolutní pro samotné boční stěny. No, pak je přitlačíme na odpovídající strany rodiče pomocí vlastností CSS , a .
Aby se obsah bloku neskrýval pod bočními obrázky, nastavili jsme „blok“ tak, aby měl boční výplň (CSS), která může být stejná nebo o něco větší než samotné strany. Nastavíme také malé okraje nahoře a dole, aby se text „nelepil“ k okrajům.

V IE6 je u této metody malá chyba:

Pokud je šířka nebo výška "bloku" lichá, pak mezi vnitřní okraj bloku a vpravo umístěném postranním panelu bude nepříjemné 1px odsazení, které celý obrázek zkazí. Tuto chybu lze opravit pomocí CSS hack s určitým výrazem, ale ani zde nebudu uvádět takový příklad, protože často zamrzne prohlížeč a je lepší jej nepoužívat.

Udělejme to jinak. Nastavíme levý okraj (CSS) "right_bok" na 100 % tak, aby se posunul za pravou hranici hlavního bloku, a poté jej vraťme zpět a posuneme jej doleva o počet pixelů rovný jeho šířce. IE6 pracuje s hodnotami těchto vlastností korektně, takže mu nezbývá nic jiného, než umístit blok tam, kam potřebujeme.

Tento způsob zaoblení rohů je podobný předchozímu, ale na rozdíl od něj se zde po stranách neumisťují prvky HTML, ale ty přidané do hlavního bloku pseudo prvky. Díky tomuto přístupu bylo možné zbavit se zbytečného HTML kódu stránky.

Příklad HTML a CSS: Zaoblení rohů pomocí bočních pseudoprvků

web - Zaoblení rohů v CSS pomocí bočních pseudoprvků

Hlavní obsah.

Popis příkladu

Pomocí CSS pseudoprvků naznačíme, že chceme přidat něco na začátek a konec hlavního bloku. A pomocí vlastnosti CSS jen přidáme potřebné obrázky zaoblených rohů, nebo spíše stran. Vytvořili jsme tedy dva pseudoprvky s obrázky.
No a pak uděláme úplně to samé jako v předchozím příkladu, jen pracujeme s vytvořenými pseudoprvky.

Pro IE6 a IE7 byly v tomto příkladu použity následující „berličky“:

Jak víte, IE6 a IE7 nerozumí zde použitým pseudoprvkům, takže děláme následující. Používáme výraz výraz, který integruje dva tagy do hlavního prvku a dáváme jim stejné styly jako v předchozím příkladu. Všimněte si, že vložený kód, který následuje po prvním innerHTML, je přidán bezprostředně za úvodní značku „block“ a po druhé innerHTML je přidán před uzavírací značku. Ano, v našem případě to nevadí, protože se používá absolutní polohování, ale někdy je užitečné o tom vědět.
Abychom zabránili tomu, aby tento kód viděly jiné prohlížeče, přikládáme jej podmíněné komentáře. Bylo by lepší, kdyby to bylo odstraněno úplně. samostatný soubor CSS, který je spojen se značkou uzavřenou stejnými komentáři.

Zaoblené rohy v CSS pomocí obtékání bloků

Podstatou této metody je, že se nejprve vyříznou rohy obrázku. Poté se do hlavního bloku umístí několik dalších bloků (podle počtu rohů), které jsou vnořeny do sebe. Každý z nich má jako pozadí jeden obrazový roh. Obrázky je zakázáno reprodukovat a souřadnice jsou uvedeny tak, aby zabíraly místa v rozích bloků. Takto se dosáhne efektu zaoblených rohů.

Příklad HTML a CSS: Zaoblení rohů pomocí obtékání bloků

webové stránky - Zaoblení rohů v CSS pomocí obtékání bloků

Blokovat obsah.

Popis příkladu

Do hlavního bloku umístíme další čtyři. Protože žádný z těchto bloků nemá okraje ani okraje a pouze ten nejvnitřnější má odsazení, jsou všechny stejně vysoké a široké.
Pomocí vlastnosti CSS nastavíme každý z vnitřních bloků do rohu jako pozadí, zakážeme jejich reprodukci a umístíme je do rohů bloků. A protože je barva pozadí prvků průhledná, jsou na stránce viditelné všechny čtyři rohy pozadí.
Přidejte si to sami externí jednotka s rohem požadované barvy pozadí. Vše je připraveno.

Šířku bloku můžete explicitně nastavit zadáním požadovaný majetek class="block" , ale pro změnu výšky je potřeba použít nejvnitřnější prvek (pro nás je to "rb" ).

Zaoblené rohy v CSS pomocí polohování

I zde jsou vyříznuty rohy pro pozadí, které budou naznačeny na malých blocích. Pomocí absolutního umístění CSS jsou tyto bloky umístěny v rozích hlavního prvku, který je dán požadovanou barvu pozadí.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění

webové stránky - Zaoblení rohů v CSS pomocí polohování

Blokovat obsah.

Popis příkladu

Uvnitř hlavního prvku (class= "block") umístíme čtyři značky s třídami "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , které budou fungovat jako rohové bloky.
Pomocí vlastnosti CSS připojíme ke každému rohovému bloku vlastní obrázek na pozadí a přidělíme mu šířku a výšku stejnou jako tyto obrázky na pozadí. Pro každý případ resetujeme velikost písma (CSS) a ořízneme přebytek (CSS).
Určujeme relativní umístění pro hlavní prvek (CSS:relative), protože rohové bloky umístíme relativně k němu, a pro samotné rohy - absolutní (absolutní).
Pomocí vlastností CSS a , určíme vertikální a horizontální vzdálenosti odsazení pro rohové bloky tak, aby byly umístěny v rozích hlavního bloku.

V IE6 je s touto metodou několik problémů:

Pokud není šířka "bloku" výslovně specifikována, pak rohy vlevo nezapadnou na místo. Důvodem je přítomnost vnitřního polstrování v bloku. Nejjednodušší způsob, jak problém vyřešit, je odstranit výplň a zabalit hlavní obsah „bloku“ (bez rohů) do dalšího obalu bloku a poté zadat požadované odrážky. Ale udělal jsem to jinak, když jsem povolil rozložení pomocí vlastnosti zoom:1, která říká IE6, aby zobrazil prvek v jeho přirozené velikosti. Tato vlastnost je neplatná, takže pokud se ji rozhodnete použít, doporučuji provést připojení přes podmíněné komentáře.
Stejná jednopixelová chyba, která byla diskutována výše. Ale zde se mohou tvořit mezery nejen mezi pravými rohy a pravá strana bloku, ale i níže. A pokud jsme se zbavili mezer napravo, tak to u spodních nepůjde. Řešením je explicitně zadat rovnoměrnou šířku a výšku hlavního prvku. Můžete také nastavit liché hodnoty, ale pak budete muset nastavit vzdálenost offsetu dolů a doprava tak, aby nebyla nula, ale -1px.

Technologie za touto metodou CSS rohového zaoblení je v podstatě stejná jako ta předchozí, takže podrobné komentáře zde bude vynecháno. Jediný rozdíl je v tom, že místo samostatných rohových obrázků na pozadí je zde použit jeden společný obrázek sprite. Díky tomu se stránky načítají rychleji, protože jeden obrázek „váží“ méně než čtyři a hostování místo čtyř je jedno odvolání.

Sprite je obrázek, který kombinuje několik obrázků používaných jako pozadí pro prvky webu. Která část spritu bude pozadím konkrétního HTML elementu závisí na souřadnicích zadaných ve speciální CSS vlastnosti.

Příklad HTML a CSS: Zaoblení rohů pomocí umístění a sprite

webové stránky - Zaoblení rohů v CSS pomocí sprite a umístění

Blokovat obsah.

Popis příkladu

Pomocí vlastnosti CSS připojíme k rohovým blokům obrázek spritu na pozadí, který má kulatý tvar o rozměrech 22x22 pixelů (11x11 pixelů pro každý čtvrtroh).
Pomocí vlastnosti CSS určíme souřadnice offsetu pozadí. Například hodnota -11px 0 znamená, že pozadí bude posunuto doleva o 11px na ose X, ale nebude posunuto na ose Y. Levá polovina sprajtu tedy překročí hranici prvku a zůstane pouze pravá. Viditelný je ale jen z poloviny, protože jeho výška je 22px a výška samotného rohového bloku je pouze 11px. Ukazuje se tedy, že kdy daná hodnota Pozadí prvku bude v pravé horní čtvrtině spritu.

S IE6 jsou stejné problémy jako v předchozím příkladu.

V tomto příkladu budeme zaoblovat rohy prvku, který má ohraničení, ale to není specifická vlastnost této konkrétní metody – v předchozích příkladech můžete snadno použít zaoblení s ohraničením.

Samotné zaoblení provedeme pomocí pseudoprvků vytvořených z hlavního bloku, ale bez aplikování polohování na ně.

A ještě jedna věc. V předchozích příkladech byly rohy vyříznuty spolu s pozadím uvnitř, a to není vždy nutné, zvláště pokud se očekává, že pozadí bloku se zaoblenými rohy nebude jednotné. Proto bylo pozadí uvnitř rámu zde průhledné (to umožňuje formát PNG) a když byly rohy vyříznuty, jejich vnitřek se také ukázal jako průhledný. V případě potřeby můžete použít podobný přístup i v předchozích příkladech.

Příklad HTML a CSS: Zaoblení rohů pomocí pseudoprvků

web - Zaoblování rohů v CSS pomocí pseudoprvků

Blokovat obsah.

pozadí a pomocí něj je umístíme na pravou stranu a zakážeme „reprodukci“. To je vše, rohy jsou připraveny.

Protože jsme specifikovali výplň pro „blok“ (CSS), pseudoprvky, a tedy rohy, nejsou umístěny v rozích bloku, ale jsou 15px od okrajů. Abychom to napravili, dáváme pseudoprvkům záporné okraje ( CSS ) na požadované strany, abychom je umístili na horní část výplně. Ale děláme okraje rovné ne 15, ale 17px, to je nutné pro pokrytí rámečku (CSS), jehož šířka je 2px (15+2=17). To je vše.

Pro IE6 a IE7 jsme použili již známé "berličky" s vkládáním HTML kódu sem, protože tyto prohlížeče nerozumí zde použitým pseudoprvkům:

Pomocí výrazu integrujeme do hlavního prvku dva tagy, které také převedeme na bloky. Poté do nich umístíme jednu visačku. A pak mají tyto značky stejné vlastnosti jako pseudoprvky. Jediné, co je, dodatečně přidáme CSS vlastnost :relative, bez které rám překrývá rohy.

Nevýhodou této metody je, že nelze explicitně nastavit výšku bloku se zaoblenými rohy, protože pokud přesahuje velikost obsahu, pak se spodní rohy nebudou přitlačovat k okrajům. Tomu se lze vyhnout, pokud hlavní obsah stále uzavřete do jiného bloku a nastavíte jeho výšku.

Další příklad zaoblení rohů s pseudoprvky a bez přídavných bloků

Tento příklad je podobný předchozímu, ale zde používáme umístění k uspořádání pseudoprvků. Díky tomuto přístupu bylo možné explicitně specifikovat výšku bloku se zaoblenými rohy.

Příklad HTML a CSS: Zaoblení rohů, kde můžete změnit výšku bloku

web - Zaoblení rohů v CSS pomocí pseudoprvků, kde lze nastavit výšku bloku

Blokovat obsah.

A opět pro IE6 a IE7 přidáváme několik doplňkové prvky pomocí výrazu a uzavření kódu v podmíněných komentářích. Tentokrát se ani nepokusíme napodobit pseudoprvky, ale uděláme to jednodušeji.

Do „bloku“ přidáme čtyři značky a aplikujeme na ně pozici. A pak jim jednoduše ukážeme rohy obrázku jako pozadí a umístíme je do rohů hlavního prvku. To znamená, že jednáme přesně jako v jedné z výše diskutovaných metod.
Chcete-li se zbavit chyby s jedním pixelem (která byla výše zmíněna více než jednou), přidejte k prvkům pravého rohu levý okraj (CSS) se 100% hodnotou a záporným posunem rovným -9px. Obecně, pokud si pamatujete, toto odsazení by se mělo rovnat šířce rohového bloku (u nás je to 11px), ale nezapomeňte na 2px okraj, který zde máme - musíme na něj umístit rohy (11px-2px=9px).

Mimochodem, ve skutečnosti by bylo jednodušší emulovat pseudoprvky, jako jsme to udělali v předchozím příkladu – takto by bylo méně dodatečného kódu. Ale ne v IE6, tento prohlížeč by potřeboval několik dalších „berliček“ a v důsledku toho by musel napsat dvě samostatné podmíněné komentáře- pro IE6 a IE7, a to by jen nafouklo kód...

Ve Firefoxu tato metoda funguje správně od verze 3.6 a v Opeře - od verze 10.0 jsem pro ně nepřišel s berličkami, protože je to málo relevantní.

Tradiční pravoúhlé rohy v designu webových stránek už každého dávno omrzely. V módě jsou zaoblené rohy, které se nedělají 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é mezerou, 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 poloměr pravého horního a levého dolního rohu.
div ( border-radius: 20px 10px 0; )	První hodnota nastavuje poloměr levého horního rohu, druhá - pravý horní i levý dolní a třetí hodnota - pravý dolní.
div ( border-radius: 20px 10px 5px 0; )	Postupně nastavuje poloměr levého horního, 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. Rohy bloku

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Poloměr

Já je suplementační forma akuzativu I.

Výsledek tento příklad znázorněno na Obr. 1.

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

Zajímavého efektu lze dosáhnout, pokud nastavíte poloměr zaoblení na větší 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 kresbou.

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Tlačítko