Okraj posuvníku

Úvod » Rady, Tipy, Triky » Okraj posuvníku

Všechny níže uvedené příklady používají vlastnost CSS border použitou na <div> prvek HTML . Když používáte tuto vlastnost, musíte zadat 3 hodnoty: šířku, styl, barvu.

Existuje mnoho kombinací stylu ohraničení / barvy / šířky, takže můžete použít níže uvedené příklady a experimentovat s kódem, jak se vám líbí. Pokud chete přes celou šířku stránky zadejte: width:max

Plná hranice

<div style="width:350px;height:100px;line-height:3em;overflow:scroll;padding:5px;border:1px solid #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Tečkovaný okraj

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:1px dotted #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Přerušovaná hranice

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:1px dashed #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Silný, pevný, ohraničený

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:16px solid #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Vložit hranici

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px inset #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Počáteční hranice

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px outset #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Drážkovaný okraj

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px groove #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů..
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Dvojité ohraničení

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px double #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Ridged Border

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px ridge #DEBB07;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Změna barev

<div style="width:350px;height:150px;line-height:3em;overflow:scroll;padding:5px;border:6px ridge #DEBB07;5px;background-color:black;color:orange;">
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.
</div>
Pomocí vlastnosti CSS „border“ nastavíte ohraničení kolem posuvného pole HTML. Můžete nastavit šířku, styl a barvu okrajů.

Změna barev a odkaz na CSFD a pokud chceme přes celou šířku stránky nastavíme width:max px

<div style="text-align:left; width:400px;height:173px;line-height:0em;overflow:auto;padding:5px;background-color:#EEE8AA;color:#714D03;border:4px double #2F4F4F;">
<hr style="width:max;text-align:left;margin-left:0">
<p><a href="https://www.csfd.cz/film/312362-velka-cinska-zed/prehled/" target="_blank" style="font-size:14px; color: #000000; " rel="noopener noreferrer">Velká čínská zeď odkaz na CSFD</a></p>
<hr style="width:max;text-align:left;margin-left:0">
<p><a href="https://www.csfd.cz/film/312362-velka-cinska-zed/prehled/" target="_blank" style="font-size:14px; color: #000000; " rel="noopener noreferrer">Velká čínská zeď odkaz na CSFD</a></p>
<hr style="width:max;text-align:left;margin-left:0">
</div>

Velká čínská zeď odkaz na CSFD


Velká čínská zeď odkaz na CSFD