Ohraničení a obrysy CSS jsou cennými nástroji pro webové designéry, kteří chtějí přidat webu šmrnc. Jsou snadno použitelné, jakmile víte, jak fungují, a jsou dostatečně univerzální, aby splnily širokou škálu potřeb. Podívejme se na hranice CSS, abychom viděli, kde byste měli začít.

Jaký je rozdíl mezi okrajem a obrysem v CSS?

Obrysy a okraje CSS tvoří dvě vnější vrstvy krabicový model CSS, sedící mezi hranicemi a okraji. I když jsou tyto vlastnosti podobné, mají různé hodnoty a účely.

Za prvé, obrysy CSS jsou mimo hranice. To znamená, že se mohou překrývat s obsahem mimo prvek, na který je aplikujete. Spolu s tím hranice CSS mění rozměry prvku, ale obrysy nikoli.

Pokud máte potíže s vizualizací stylů ohraničení a obrysů, můžete použít svůj vývojové nástroje prohlížeče k ladění jim.

CSS Border & Outline Shared Property Values

Navzdory rozdílům sdílejí okraje a obrysy CSS některé z jejich hodnot. Zkratka, kterou používáte pro každou z nich, je také velmi podobná.

CSS Border & Outline Shorthand

instagram viewer

Stejně jako ostatní složité vlastnosti CSS mají k dispozici zkrácený popis ohraničení i obrysy. Obě tyto vlastnosti sdílejí stejný formát pro své zkrácené možnosti a vypadá to takto.

okraj: šířkastylbarva;
obrys: šířkastylbarva;

To vytváří pravidla, která vypadají takto, když jsou v akci. Tato zkratka však samozřejmě nepokrývá všechny dostupné hodnoty pro tyto vlastnosti.

ohraničení: 10px plná modrá;
obrys: 20px plná červená;

Výsledkem těchto zkrácených pravidel pro ohraničení a obrys CSS je tenký modrý okraj se silným červeným obrysem.

Stejně jako jiné zkrácené vlastnosti CSS můžete k dosažení stejných výsledků použít také jednotlivé vlastnosti.

CSS border-width & obrys-width

Šířky okrajů a obrysů jsou volitelné hodnoty vlastností CSS, které nastavují tloušťku okrajů a obrysů, které používáte. Formát těchto vlastností je stejný.

obrys-šířka: 20px;
border-width: 10px;

Ohraničení umožňují nastavit jednotlivé šířky pro každou stranu prvku, ale obrysy nikoli. Více si o tom můžete přečíst v následujících částech.

CSS styl ohraničení a styl obrysu

Ohraničení a obrysy CSS přicházejí v různých stylech. Plné okraje jsou nejběžnější, ale můžete být kreativní se způsobem, jakým používáte okraje a obrysy.

styl ohraničení: pevný;
styl obrysu: tečkovaný;

Úplný seznam různých stylů ohraničení a obrysů CSS najdete na konci tohoto článku.

CSS border-color & obrys-color

Stejně jako u jiných vlastností CSS založených na barvách, okraje a obrysy přijímají všechny povolené barvy CSS. To zahrnuje hexadecimální kódy, kódy RGB, těsnopisné barvy a další.

barva okraje: modrá;
barva obrysu: #ff0000;

Barevné přechody můžete použít také při práci s okraji a obrysy CSS.

Hodnoty vlastností okraje CSS

Kromě hodnot sdílených vlastností mají hranice a obrysy také jedinečné hodnoty, které je třeba prozkoumat. Ohraničení CSS mají dvě jedinečné vlastnosti, které stojí za to se naučit.

CSS border-radius

Přidáním poloměru k ohraničení prvku získáte velkou kontrolu nad jeho tvarem. Každý roh prvku může mít jiný poloměr a tuto vlastnost lze nastavit, i když je styl ohraničení nastaven na žádný.

border-radius: 20px;

Chcete-li změnit poloměr všech rohů, můžete nastavit jednu hodnotu.

Rohy můžete také rozdělit do skupin vlevo nahoře/vpravo dole a vpravo nahoře/vlevo dole.

border-radius: 10px 20px;

To usnadňuje vytváření zajímavých tvarů pomocí prvků HTML.

Nakonec můžete nastavit každý roh tak, aby měl svůj vlastní poloměr.

border-radius: 10px 20px 30px 40px;

Tyto hodnoty platí ve směru hodinových ručiček počínaje levým horním rohem.

Vlastnosti okraje CSS

Na rozdíl od obrysů můžete každou stranu ohraničení nastavit tak, aby měla pro mnoho svých vlastností jedinečnou hodnotu. To umožňuje dát každé straně vašeho prvku jinou šířku.

border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;

Můžete také nastavit nezávislé styly ohraničení CSS pro každou stranu prvku.

okraj-levý styl: pevný;
border-right-style: tečkované;
border-top-style: přerušovaná;
styl ohraničení dole: dvojnásobek;

A pokud chcete, můžete změnit barvu každé strany.

okraj-levý styl: modrá;
styl ohraničení vpravo: #ff0000;
styl okrajového topu: #00ff00;
border-bottom-style: rgb (0, 0, 255);

Strany ohraničení CSS pracují s běžnou zkratkou, která se takto kombinuje.

border-left: 10px plná modrá;
pravý okraj: 20px tečkované #00ff00;
okraj-top: 30px přerušované #ff0000;
okraj-dole: 40px dvojnásobekrgb(0, 0, 255);

Hodnoty vlastností CSS Outline

Stejně jako okraje CSS mají obrysy svou vlastní jedinečnou vlastnost; obrys-offset.

CSS obrys-offset

Přidání odsazení k obrysu vytvoří prostor mezi ním a hlavním prvkem. Tento posun musí být stejný pro každou stranu obrysu a vlastnost přijímá pouze jednu hodnotu.

obrys-offset: 10px;

To může být elegantní způsob, jak využít třetí okraj pro vaše prvky, který odpovídá barvě pozadí.

Styly ohraničení a obrysů CSS

Okraje i obrysy potřebují styl, aby fungovaly. Na výběr je deset dostupných stylů, včetně okrajů, které se vůbec nezobrazují.

styl ohraničení: pevný;
styl ohraničení: tečkovaný;
styl ohraničení: přerušovaný;
border-style: groove;
border-style: hřeben;
styl ohraničení: dvojnásobek;
border-style: inset;
border-style: začátek;
styl ohraničení: skrytý;
border-style: none;

Ohraničení sdílejí stejné styly s obrysy, pouze je-li jako vlastnost nastaven styl obrysu.

Jak používat okraje a obrysy CSS

Obrysy a okraje jsou skvělé nástroje pro návrh webových stránek. Pomocí těchto vlastností CSS můžete definovat vzhled a chování svého webu, ale budete muset být kreativní.