HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy
Barvy RGB HEX HSL
CSS pozadí
Barva pozadí Obrázek na pozadí Opakování pozadí Příloha na pozadí Těsnopis pozadí
Hranice CSS
Hranice Šířka okraje Barva ohraničení Hraniční strany Hraniční těsnopis Zaoblené hranice
Okraje CSS
Margins Margin Collapse
CSS padding Výška/šířka CSS CSS Box Model obrys CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Text CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS písma
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Ikony CSS CSS odkazy CSS seznamy CSS tabulky
Table Borders Table Size Table Alignment Table Style Table Responsive
Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float
Float Clear Float Examples
CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS
Navbar Vertical Navbar Horizontal Navbar
Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
Shadow Effects Box Shadow
Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Obrázky ohraničení CSS

❮ Předchozí Další ❯

Obrázky ohraničení CSS

Pomocí vlastnosti CSS border-imagemůžete nastavit obrázek, který se má použít jako ohraničení kolem prvku.

Vlastnost CSS border-image

Vlastnost CSS border-imageumožňuje zadat obrázek, který se má použít místo normálního okraje kolem prvku.

Nemovitost má tři části:

  1. Obrázek, který se má použít jako okraj
  2. Kde rozdělit obrázek
  3. Definujte, zda se mají střední části opakovat nebo natahovat

Použijeme následující obrázek (nazvaný "border.png"):

okraj

Vlastnost border-imagevezme obrázek a rozřeže ho na devět částí, jako je deska piškvorky. Poté umístí rohy do rohů a střední části se opakují nebo protáhnou, jak určíte.

Poznámka: Aby border-imageprvek fungoval, potřebuje také bordersadu vlastností!

Zde se opakují střední části obrázku, aby se vytvořilo ohraničení:

Obrázek jako hranice!

Zde je kód:

Příklad

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Zde jsou střední části obrázku roztaženy, aby vytvořily ohraničení:

Obrázek jako hranice!

Zde je kód:

Příklad

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Tip: Vlastnost border-imageje ve skutečnosti zkrácená vlastnost pro vlastnosti border-image-source, border-image-slice, border-image-widtha .border-image-outsetborder-image-repeat

CSS border-image - Různé hodnoty řezů

Různé hodnoty řezů zcela změní vzhled ohraničení:

Příklad 1:

border-image: url(border.png) 50 kol;

Příklad 2:

border-image: url(border.png) 20 % round;

Příklad 3:

border-image: url(border.png) 30 % round;

Zde je kód:

Příklad

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}

#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}

#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Otestujte se pomocí cvičení

Cvičení:

Dejte prvku div ohraničení obrázku. Pomocí vlastnosti short hand definujte detaily ohraničení obrázku.

<style>
div {
  border: 10px solid transparent;
  : url(border.png) 30 round;
}
</style>

<body>
  <div>This is a div element. It has some text.</div>
</body>

Vlastnosti obrázku okraje CSS

Property Description
border-image A shorthand property for setting all the border-image-* properties
border-image-source Specifies the path to the image to be used as a border
border-image-slice Specifies how to slice the border image
border-image-width Specifies the widths of the border image
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched

❮ Předchozí Další ❯