Použití okrajů a pozadí v HTML5

Tady je vlastnosti široce používané v HTML a CSS, jako jsou ohraničení a pozadí„Od začlenění CSS3 byly vylepšeny takovým způsobem, že můžeme mít například zaoblené hrany, ačkoli to vypadá docela jednoduše, v minulosti to nebylo k dispozici, takže tyto funkce nyní docela usnadňují rozšiřování práce designérů i vývojářů.
Při aplikaci hrany musíme vzít v úvahu 3 velmi důležité atributy, kterými jsou:

• šířka okraje: inicializuje šířku ohraničení.
• hraniční styl: inicializuje styl pro kreslení ohraničení.
• barva ohraničení: inicializuje barvu ohraničení.

Jakmile se s vlastnostmi seznámíte, podívejme se na jednoduchý příklad použití hrany:

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Chcete -li definovat šířku ohraničení, můžeme pracovat na základě 3 měření podle měrných jednotek, jako je pixely, cm, em; procenty a předvolbami, jako je tenké, střední a silné.
Definujeme typ ohraničení stylem, proto máme následující možnosti:

• žádný
• přerušovaný
• tečkovaný
• dvojnásobek
• drážka
• vložka
• začátek
• hřbet
• pevný

Nyní se podívejme graficky, co každý z těchto stylů znamená:

Existuje také možnost použití ohraničení a stylu na každou ze stran prvku, proto použijeme následující pokyny:
[color = # d3d3d3] border-top-width
ve stylu border-top
border-top-color [/ color]
border-bottom-width
ve stylu border-bottom
barva spodního okraje
[color = # d3d3d3] border-left-width
ve stylu ohraničení vlevo
border-left-color [/ color]
[color = # d3d3d3] border-right-width
ve stylu border-right
border-right-color [/ color]
Kde horní odkazuje na vrchol, dno k té nižší, vlevo, odjet doleva a že jo napravo.
Díky tomu můžeme dokonce dosáhnout kombinací typů hran ve stejném prvku.
Podívejme se na příklad posledně jmenovaného:

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Kód nám poskytuje následující výsledky:

K vytvoření zaoblených hran můžeme použít vlastnost poloměr to nám umožňuje určit poloměr zakřivení hrany.
Podívejme se, jak implementovat kód:

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Výsledkem je následující obrazovka:

Tímto ukončujeme tento návod k těmto prvkům, nyní můžeme bez velkého úsilí a pomocí špičkových technologických nástrojů začlenit vylepšení našich CSS.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod