Vytváření okrajů v CSS. Hraniční majetek

Jednou ze zábavných aplikací vlastnosti CSS3 box-shadow je vytvoření dvojitého ohraničení kolem prvku. Velmi zajímavý efekt pro zdobení stránky, ale bude fungovat pouze v novějších verzích prohlížečů, které podporují box-shadow.

Existuje však několik dalších metod k vytvoření tohoto efektu. Zjevné použití obrázku na pozadí navíc zdaleka není ideální.

Tento tutoriál představuje pět metod pro vytvoření dvojitého ohraničení kolem prvku. A pouze jeden z nich vyžaduje obrázek, zatímco všichni ostatní používají čistý kód CSS s vynikající podporou v prohlížečích.

Metoda 1: ohraničení a obrys

Tato metoda funguje pouze v prohlížečích, které podporují vlastnost osnovy (všechny kromě IE6 / 7). K prvku přidáte vlastnosti ohraničení i obrysu.

Jedna (ohraničení: 6px #fff; obrys: plná 6px # 888;)

Důvod, proč tato metoda funguje, je ten, že rámeček obrysu vždy kreslí na vnější stranu obdélníku. Problém s vlastností osnovy nastává při použití plovoucích prvků, protože ohraničení se překrývá se sousedními prvky.

Metoda 2: pseudo prvek

Tato metoda vyžaduje absolutní umístění rámce:

Dvě (ohraničení: 6px #fff; poloha: relativní; z -index: 1;). Dva: před (obsah: ""; zobrazení: blok; poloha: absolutní; nahoře: -12px; vlevo: -12px; ohraničení: plný 6px # 888; šířka: 312px; výplňové dno: 12px; minimální výška: 100%; z-index: 10;)

Klíčovými body jsou nastavení vlastnosti z-index (aby pseudo prvek překrýval obsah), umístění a hodnota min-height. Druhá vlastnost zachovává pružnost rámce.

Metoda 3: stín

Nejlepší metoda, protože vyžaduje pouze jeden řádek kódu s nastavením vlastnosti box-shadow.

Tři (box-shadow: 0 0 0 6px #fff, 0 0 0 12px # 888;)

K vytvoření dvojitého ohraničení se používají dva stíny. Jsou odděleny čárkami. Rozostření je nastaveno na 0. Protože se druhý stín překrývá s prvním, má dvojnásobnou šířku. Klíčovým bodem je použití neprůhledných barev, které vytváří jasnou hranici mezi rámečky.

Stejně jako vlastnost osnovy, box-shadow neovlivňuje sousední prvky a může je překrývat. Proto je nutné nastavit pole pro vytvoření vzhledu kompozice.

Přirozeně je podpora vlastnosti box-shadow omezena na novější prohlížeče.

Metoda 4: Extra div element

Tato metoda používá externí prvek

pro zobrazení dvojitého ohraničení. Jediná metoda, která funguje všude:

Four (border: solid 6px # 888; background: #fff; width: 312px; min-height: 312px;). Four div (width: 300px; min-height: 300px; background: # 222; margin: 6px auto; overflow : skryté;)

Vnější prvek je o něco větší, což vytváří iluzi dvojitého ohraničení.

Metoda 5: vlastnost border-image

Další novou technikou je často přehlížená vlastnost CSS3 border-image:

Five (border-width: 12px; -webkit-border-image: url (multiple-border.gif) 12 12 12 12 opakování; -moz-border-image: url (multiple-border.gif) 12 12 12 12 opakování; border-image: url (více okrajů) 12 12 12 12 opakování; / * pro Opera * /)

Znáte jinou metodu?

Zde jsou samozřejmě shromážděny dlouho známé a široce používané metody. Ale možná znáte trik. Podělte se se svými čtenáři v komentářích.

Michael 2016-06-11 1 HTML a CSS 0

Jak se provádí dvojité ohraničení v CSS?

Ahoj všichni. Víte, jak zdvojnásobit ohraničení v CSS? Pokud ne, přečtěte si prosím tuto malou poznámku. Jde o to, že to nemůžete udělat s pravidelným okrajem, musíte jít jinou cestou.

Pokud zadáte ohraničení pomocí vlastnosti border, můžete zadat pouze jedno. Ale velmi často může design vyžadovat více snímků. V tomto případě byste měli použít pseudorámeček - stín.

Dvojité ohraničení se stínem

Obecně platí, že pokud chcete podrobněji studovat stín v css, doporučuji vám přečíst si příslušné téma. V tomto článku nebudu podrobně vysvětlovat syntaxi vlastnosti, ale jednoduše vám ukážu trik, jak vytvořit dvojité ohraničení. Vytvořme tedy obyčejný blok, kterému přiřadím některé styly. Blok může být libovolný a s jakýmkoli obsahem. V mém případě je to jednoduchý div, takže neukážu ani html kód. A tady jsou styly:

Div (
pozadí: # E0D8A3;
šířka: 180px;
výška: 110px;
polstrování: 12px;
}

Typický příklad blokového designu.
Nyní vytvoříme dvojité ohraničení pomocí více vržených stínů. Do stylů pro blok přidám následující vlastnost:

Box-shadow: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;

Takto to vypadá:

Jak vidíte, dopadlo to docela pěkně. V box-shadow je pouze 5 parametrů. První je horizontální posun stínu, druhý je vertikální. Třetí a čtvrtý parametr jsou rozostření a roztažení. Jak vidíte, prvních tří se vůbec nedotýkáme. Nepotřebujeme rozmazání, protože potřebujeme ostrý stín. Jak vidíte, předepsal jsem čtvrtý parametr - strečink. Určuje, o kolik bude stín větší než prvek, ke kterému je připojen.

Ve výchozím nastavení vše vypadá takto - stín má stejnou velikost jako prvek a jasně leží pod ním. Pokud změníte roztažení, stín začne vyčnívat za prvek. Takto můžete vytvořit ohraničení, přesně stejné jako u vlastnosti border. S pátým parametrem si myslím, že je vše jasné - toto je barva stínu.

Jak vidíte, právě jsem uvedl parametry pro každý nový stín oddělené čárkami. Myslím, že jste již uhodli, že stejným způsobem můžete vytvořit trojitý okraj atd. Nejsou zde žádná omezení. Vlastně, pokud jde o mě, otázka je uzavřená, ale pokud máte nějaké dotazy, můžete je napsat do komentářů.

Chvilka vaší pozornosti: Všichni chceme hostovat naše stránky na spolehlivém hostingu. Analyzoval jsem stovky hostingů a našel jsem ten nejlepší - HostIQ Na internetu jsou o něm stovky pozitivních recenzí, průměrné uživatelské hodnocení je 4,8 z 5. Ať jsou vaše stránky šťastné.

Rámy lze použít mnoha způsoby, například jako dekorativní prvek nebo k oddělení dvou předmětů. CSS poskytuje nespočet možností použití rámců.

Tloušťka rámu

Tloušťka ohraničení je určena vlastností width-width, která může být tenká, střední a silná, nebo číselná hodnota v pixelech. Obrázek ukazuje tento systém:

Barva rámu

Vlastnost border-color definuje barvu ohraničení. Hodnoty jsou normální hodnoty barev, například „# 123456“, „rgb (123,123,123)“ nebo „žluté“.

Typy rámů

Existují různé typy rámů. Níže je uvedeno osm typů rámců a jejich interpretace v aplikaci Internet Explorer 5.5. Všechny příklady jsou uvedeny „zlatou“ barvou a „tlustou“ tloušťkou, ale lze je samozřejmě zobrazit i v jiné barvě a tloušťce.

Pokud nechcete zobrazit ohraničení, lze použít hodnoty none nebo hidden.

Příklady definování rámců

Tři vlastnosti diskutované výše lze kombinovat v každém prvku a podle toho nastavit různé rámce. Pro ilustraci se podívejte na dokument, který definuje různé rámce pro

,

,
    a

    Výsledek nemusí být tak působivý, ale ukazuje některé možnosti:

    H1 (border-width: strong; border-style: dotted; border-color: gold;) h2 (border-width: 20px; border-style: outset; border-color: red;) p (border-width: 1px; border-style: dashed; border-color: blue;) ul (border-width: thin; border-style: solid; border-color: orange;)

    Můžete také nastavit vlastní vlastnosti pro horní, dolní, pravý a levý okraj rámečku. Postupujte takto:

    H1 (border-top-width: strong; border-top-style: solid; border-top-color: red; border-bottom-width: strong; border-bottom-style: solid; border-bottom-color: blue; border-right-width: strong; border-right-style: solid; border-right-color: green; border-left-width: strong; border-left-style: solid; border-left-color: orange;)

    Zkrácený zápis

    Stejně jako u mnoha dalších vlastností můžete kombinovat více vlastností do jedné pomocí ohraničení slova. Příklad:

    P (width-border: 1px; border-style: solid; border-color: blue;)

    lze kombinovat do:

    P (ohraničení: 1px plná modrá;)

    souhrn

    V tomto kurzu jste se dozvěděli o neomezených možnostech CSS při používání rámců.

    V další lekci se podíváme na to, jak definovat rozměry v krabicovém modelu - výšku a šířku.

    Vlastnictví CSS – « okraj», Umožňuje nastavit tloušťku, barvu a typ obvodové čáry kolem prvku. Parametry této vlastnosti lze zapsat na jeden řádek, oddělené mezerami a v libovolném pořadí.

    • - šířka řádku jeden pixel
    • - plná čára
    • - Bílá barva
    • - Černá barva
    • - šedá barva

    Hranice pevného prvku

    Přerušovaný okraj prvku

    Tečkovaný prvek hranice

    Ohraničení prvku dvojitou čarou

    Vlastnictví jednotlivých úseků hranice

    Reliéfní vlnitý rámeček v objemu

    Objem konvexního vlnitého rámu

    Volumetrický stlačený rám

    Volumetrický konvexní rám

    Návody / CSS /

    Lekce 7. Zarámujte prvek CSS

    Téměř každý web používá vlastnost, která vytváří ohraničení kolem prvku. Je potřeba buď pro tlačítka, nebo pro bloky s textem. Chcete -li vytvořit ohraničení, má prvek v CSS dvě vlastnosti: ohraničení a obrys. Zvažme je.

    okraj

    Tato vlastnost je potřebná k nastavení ohraničení kolem prvku, označuje jeho ohraničení ve webovém dokumentu, při umístění prvku je zohledněna šířka ohraničení. Má 3 hodnoty- barvu, tloušťku a typ rámu.

    Syntaxe vlastnosti border je následující:

    ohraničení: Šířka Typ Barva;
    Můžete zvolit jiné pořadí zadávání hodnot vlastností, ale hlavní věcí je mezera.

    Tloušťka (šířka) rámečku musí být uvedena v pixelech (px) nebo procentech (%).
    Barvu lze zadat buď ve formátu RGB (Red Green Blue), nebo v HTML HEX kódu.

    Níže jsou uvedeny TYPY ŘADY s jejich jmény:

    Jak nastavit ohraničení prvku? Postupujeme následovně:

    #blok (
    ohraničení: 3px plné # 0085cc; / * nastavit 3px modrou čáru * /
    }

    Pokud chcete nainstalovat jeden-dva-tři rámečky z určité strany, pak to označíme takto:

    hraniční- rám nahoře;
    spodní okraj- rám ve spodní části;
    hraničně vlevo- rámeček vlevo;
    pravá hranice- rámeček vpravo;

    Blokovat (
    pravý okraj: 3 pixely plné # 0085cc;
    border-bottom: 2px dashed # 0085cc;
    }

    Pokud chceš odstranit rámečky prvek v CSS, poté zapište na okraj vlastnosti - žádný

    Prázdný (
    hranice: žádná; / * prvek s prázdnou třídou nebude mít ohraničení * /
    }

    obrys

    Obrys je vlastnost, kterou potřebujete k nastavení vnějšího ohraničení prvku.

    Tady je dva rozdíly od hranice:
    Za prvé, čára uvedená v obrysu NE ovplyvní polohu samotného pole, jeho šířku a výšku.
    Za druhé, neexistuje možnost instalace rámu z určité strany.
    Syntaxe je stejná jako border.

    obrys: 2px tečkovaný # 0085cc; / * 2 pixelové tečkované modré ohraničení * /
    Pro osnovu i pro ohraničení můžete ohraničení odstranit zadáním none:

    Děkuji za pozornost!

    Předchozí článek
    Lekce 6.

    Hranice prvku.

    Padding and margins in CSS. Co jsou marže a odsazení? Další článek
    Lekce 8. Jak nastavit barvu textu a pozadí prvku v CSS?

    Komentáře k článku (vk.com)

    okraj

    Podpora prohlížeče

    12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

    Popis

    Vlastnost CSS umožňuje současně nastavit šířku, styl a barvu ohraničení bloku. Hranice bloku je pravidelná čára / rámeček, který obklopuje blok ze všech stran. Je třeba mít na paměti, že když přidáte ohraničení, ovlivní to celkovou velikost bloku.

    Hodnoty jsou odděleny mezerou a mohou být v libovolném pořadí, prohlížeč určí, který odpovídá požadovanému parametru. Všechny tři hodnoty jsou volitelné, šířku a / nebo barvu lze vynechat, v takovém případě bude místo chybějící hodnoty použita hodnota nastavená pro výchozí vlastnost, tj. pokud například není zadána žádná šířka, použije se výchozí hodnota vlastnosti. Tabulka pod syntaxí obsahuje hodnoty vlastností, které můžete použít.

    Poznámka: Chcete-li nastavit ohraničení pouze na určitých stranách prvku, použijte následující vlastnosti: border-top, border-bottom, border-left, border-right.

    Tip: Obecně platí, že když používáte ohraničení, musíte přidat odsazení.

    Vlastnost CSS: border

    Přidávají mezeru mezi rámeček bloku a jeho obsah: text, obrázky nebo podřízené značky. Obvykle se ohraničení zobrazuje v blízkosti obsahu prvku, což je užitečné pouze v případě, že potřebujete kolem obrázku nastavit ohraničení.

    Syntax

    border: border-width border-style border-color | inherit;

    Hodnoty vlastností

    Příklad

    Příklad

    Tady je nějaký text.

    Výsledek tohoto příkladu v okně prohlížeče:

    Jak nastavit barvu, styl a velikost ohraničení v polích.

    Ve značkovacích jazycích je obrubník ( okraj), mají pouze tabulky, obrázky a rámečky, v některých případech je možné nastavit barvu ohraničení a je to.

    Atribut hranice

    Kaskádové šablony stylů nám dávají více možností, ale nejprve to první.

    V CSS můžeme řídit šířku ohraničení pomocí šířka okraje, nebo abychom byli přesnější, můžeme ovládat tloušťku každé strany samostatně:
    border-top-width- tloušťka horního okraje
    border-right-width- tloušťka pravého okraje
    border-bottom-width- tloušťka spodního okraje
    border-left-width- tloušťka levého okraje
    Může však existovat také zkrácená forma:
    P (šířka okraje: vpravo nahoře vlevo dole;)(vpravo nahoře vlevo dole).
    Šířku obrubníku lze nastavit:
    figurky DIV (border-width: 5px), od nuly do nekonečna, tj. pozitivní.
    tenký- tenké ohraničení, DIV (šířka okraje: tenké)
    střední- střední ohraničení, DIV (šířka ohraničení: střední)
    tlustý- silné ohraničení, DIV (šířka okraje: tlusté)
    S čísly je to jasné, ale s těmito hodnotami to vše závisí na prohlížeči, ale stejně tenký<= medium <= thick .

    Můžeme také ovládat barvu ohraničení pomocí barva okraje nebo přesněji s barvou každé strany:
    border-top-color barva horního okraje;
    border-right-color pravá barva okraje;
    barva spodního okraje barva spodního okraje;
    border-left-color barva okraje na levé straně.
    Hodnota barvy je nastavena jako pro barva, tj. jedna ze 16 barev: aqua, černá, modrá, fuchsie, šedá, zelená, limetková, kaštanová, námořnická, olivová, fialová, červená, stříbrná, šedozelená, bílá nebo žlutá, lze také nastavit barvy: barva: # 000000, barva: # AF0 , barva: rgb (255,0,0) nebo barva: rgb (100%, 0%, 0%).
    Bez ohledu na to, jaké barevné schéma si vyberete, prohlížeče jej přesto přeloží barva: rgb (255,0,0)... Například barva: limetková = barva: # 00ff00 = barva: # 0F0 = barva: rgb (0%, 100%, 0%), ale pro prohlížeč je to jedno barva: rgb (0,255,0), tj. vypočítá tuto hodnotu.

    Pokud lze tloušťku a barvu ohraničení ovládat pomocí HTML, pak styl ( hraničním stylu) Pouze CSS !!!
    Styl lze ovládat každou stranou samostatně:
    ve stylu border-top styl horního okraje;
    ve stylu border-right styl pravého okraje;
    ve stylu border-bottom styl spodního okraje;
    styl ohraničení vlevo styl ohraničení na levé straně.
    Nyní se podívejme na hodnoty stylu:
    1)border-style: žádný- Toto je výchozí, podobné jako border-width: 0.
    2)styl ohraničení: skrytý- Totéž, kromě tabulek, na které se podíváme později.
    3)styl ohraničení: tečkovaný- Tečkovaný okraj.
    4)border-style: dashed- Tečkované ohraničení.
    5)styl ohraničení: pevný- Hranice plné čáry, tj. jako v HTML.
    6)border-style: double- Dvojité plné ohraničení, zde potřebujete šířku okraje alespoň 3 pixely.
    7)styl ohraničení: drážka- Okraj vypadá, jako by byl vyříznut na plátno.
    8)hraniční styl: hřeben- Okraj vypadá jako vyčnívající z plátna.
    9)styl ohraničení: vložka- Celá krabice vypadá, jako by byla vtlačena do plátna.
    10)styl ohraničení: začátek- Naproti tomu předchozímu.
    Některé prohlížeče mohou ignorovat tečkované, čárkované, dvojité, drážkové, hřebenové, vložené a počáteční hodnoty a zobrazovat je jako plné, tj. obvyklá hranice.

    Samozřejmě to tak je, ale všechny výše uvedené příklady jsou pouze principem činnosti, nikoli mechanismem.
    Vládnoucí vlastnost okraj implikuje (border: size style color;), toto pravidlo se provede, pokud jsou přítomny všechny tři hodnoty a například pouze v tomto pořadí H1 (ohraničení: 5px dvojitá červená;), ale mohou existovat výjimky, pokud jsou tyto hodnoty poskytovány značkovacími jazyky, například pro tabulku TABULKA (ohraničení: 2 pixely), tj. je zadána pouze jedna hodnota.

    Abychom neřídili celý obrubník, ale každou část zvlášť, existují pravidla:
    (border-top: barva stylu velikosti;) Ovládání horního obrubníku;
    (pravý okraj: barva stylu velikosti;) Ovládání obrubníku vpravo;
    (border-bottom: size style color;) Ovládání spodního obrubníku;
    (border-left: size style color;) Ovládání obrubníku vlevo.
    Tato pravidla lze použít samostatně nebo všechna dohromady.

    Výjimkou je toto pravidlo:
    H1 (
    ohraničení: 4px plná zelená;
    }

    Jde o to, že v CSS má poslední pravidlo nejvyšší prioritu, v tomto případě vlastnost border obsahuje border-left, a proto bude pravidlo border-left ignorováno, přesně takto:
    H1 (
    ohraničení: 4px plná zelená;
    ohraničení vlevo: 2px dvojitá červená;
    }

    Od začátku nastavujeme pravidla pro celý obrubník, a poté pro jednotlivé oblasti.

    Mám vše na hranicích pro prvky, kromě toho, že budeme zvažovat některé vlastnosti, když se dostaneme k tabulkám a dalším výjimkám.

    CSS: hranice. Hranice prvku.

    Hranice CSS3

    Hranice CSS3

    Pomocí CSS3 můžete vytvářet zaoblené okraje, přidávat stíny do kontejnerů a používat obrázek jako ohraničení - bez použití návrhového programu, jako je Photoshop.

    V tomto kurzu se dozvíte o následujících vlastnostech ohraničení:

    • poloměr hranice
    • box-stín
    • hraniční obraz

    Podpora prohlížeče

    Vlastnictví Podpora prohlížeče
    poloměr hranice
    box-stín
    hraniční obraz

    Internet Explorer 9 podporuje některé z nových vlastností ohraničení.

    Firefox vyžaduje pro border-image předponu -moz-.

    Chrome a Safari vyžadují pro border-image předponu -webkit-.

    Opera vyžaduje pro border-image předponu -o-.

    Safari také pro box-shadow vyžaduje předponu -webkit-.

    Opera podporuje nové vlastnosti ohraničení.

    CSS3 zaoblené rohy

    Přidání zaoblených rohů do CSS2 bylo složité. Pro každý roh jsme museli použít jiné obrázky.

    V CSS3 je vytváření zaoblených rohů snadné.

    V CSS3 se vlastnost poloměr ohraničení používá k vytváření zaoblených rohů:

    Tento blok má zaoblené rohy!

    CSS3 Box Shadow

    V CSS3 se vlastnost box-shadow používá k přidání stínů do kontejnerů:

    CSS3 Border-Image

    S vlastností CSS3 border-image můžete použít obrázek k vytvoření ohraničení:

    Vlastnost border-image vám umožňuje určit border-image!

    Původní obrázek použitý k vytvoření ohraničení je váš:

    Nové vlastnosti ohraničení

    Atribut hranice

    Atribut hranice, tag

    , slouží k určení tloušťky ohraničení kolem stolu.

    Hranice HTML

    Je přípustné použít ohraničení bez hodnot, pak bude tloušťka ohraničení rovna jednomu pixelu. Ve výchozím nastavení se rámeček zobrazuje s 3D efekty, ale pokud navíc použijete atribut pozadí, rámeček se stane „plochým“.

    Pokud je navíc atribut border nenulový, pak prohlížeče také zobrazují tenké ohraničení kolem samotných buněk. Zobrazení těchto hranic lze ovládat pomocí atributu rules.

    Hodnoty

    Hodnota atributu může být libovolné nezáporné číslo určující velikost v pixelech.

    Výchozí hodnota: 0.

    Syntax

    Požadovaný atribut: Žádný.

    Příklad HTML: Použití atributu Border

    Příklad výsledku

    Výsledek. Použití atributu border.

    Vlastnost CSS border aliasy k vytvoření ohraničení objektu, konkrétně tloušťka ohraničení, jeho barva a styl. Tato vlastnost je v HTML široce používána. Můžete vytvářet různé efekty, abyste lépe vnímali obsah na stránce. Navrhněte například postranní panel, záhlaví webu, nabídku atd.

    1. Syntaxe ohraničení CSS

    okraj: border-width border-style border-color | zdědit;
    • border -width - tloušťka okraje. Můžete jej nastavit v pixelech (px) nebo použít standardní hodnoty tenké, střední a silné (liší se pouze šířkou v pixelech)
    • border -style - styl vykresleného ohraničení. Může nabývat následujících hodnot
      • žádné nebo skryté - zruší ohraničení
      • tečkovaný - tečkovaný rámeček
      • čárkovaný - rámeček pomlčky
      • plná - jednoduchá čára (používá se nejčastěji)
      • dvojité - dvojité ohraničení
      • drážka - 3D rýhovaný okraj
      • hřeben, vložka, začátek - různé efekty 3D rámů
      • inherit - použije se hodnota nadřazeného prvku
    • border -color - barva ohraničení. Lze nastavit pomocí konkrétního názvu barvy nebo ve formátu RGB (viz názvy barev html pro web)
    Poznámka

    Hodnoty ve vlastnosti CSS border lze zadat v libovolném pořadí. Nejčastěji používanou sekvencí je „barva stylu tloušťky“.

    2. Příklady s různými hranicemi CSS hranic

    2.1. Příklad. Různé styly hraničního dekoru ve stylu hranic

    border-style: dashed
    border-style: dashed
    border-style: solid
    border-style: double
    border-style: groove
    border-style: ridge
    border-style: inset
    border-style: outset
    Четыре разных рамки

    border-style: dotted

    border-style: dashed

    border-style: solid

    border-style: double

    border-style: groove

    border-style: ridge

    border-style: inset

    border-style: outset

    Четыре разных рамки

    2.2. Пример. Изменения цвета рамки при наведении курсора мыши

    Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

    При наведении курсора мыши на блок цвет рамки изменится

    Вот как это выглядит на странице:

    2.3. Пример. Как сделать прозрачную рамку border

    Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

    Вот как это выглядит на странице:

    3. Толщина границы: свойство border-width

    Задает толщину линии. Ранее мы задавали ее в едином описании border.

    Синтаксис CSS border-width

    border-width : thin | medium | thick | значение ;
    • thin - тонкая толщина линии
    • medium - средняя толщина линии
    • thick - толстая толщина линии

    Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.

    border-width: thin
    border-width: medium
    border-width: thick
    Разная толщина у границ

    Вот как это выглядит на странице:

    border-width: thin


    border-width: medium


    border-width: thick


    Разная толщина у границ

    4. Как сделать рамку border только с одного края (границы)

    У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

    • border-top - для задания рамки сверху (верхняя граница)
    • border-bottom - для задания рамки снизу (нижняя граница)
    • border-right - для задания рамки справа (правая граница)
    • border-left - для задания рамки слева (левая граница)

    Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.

    Также есть свойства

    • border-top-color - задание цвета верхний границы
    • border-top-style - задание стиля верхней границы
    • border-top-width - задание толщины верхней границы
    • и т.д. для каждого направления

    На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми

    /* Описание двух одинаковых стилей: */

    4.1. Пример. Красивая рамка для выделения цитат

    Пример рамки для цитаты

    Вот как это выглядит на странице:

    Пример рамки для цитаты

    Примечание
    Можно задать отдельную границу для каждой из сторон.

    5. Как сделать несколько границ border у элемента html

    Иногда требуется сделать несколько границ. Приведем пример

    5.1. Первый вариант с несколькими границами

    Вот как это выглядит на странице:

    Есть второй способ через наложение теней.

    5.2. Наложение теней для создания нескольких границ

    Вот как это выглядит на странице:

    6. Скругление углов у границ (border-radius)

    Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

    7. Вдавленная линия CSS

    Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.


    Вот как это выглядит на странице:

    Для обращения к border из JavaScript нужно писать следующую конструкцию:

    document.getElementById("elementID").style.border ="VALUE "