Rámy

Na orámovanie elementu môžeme použiť tri typy vlastností.

Border

element{
    border: 5px solid #000; /* 5px tučný čierny okraj plnej línie z každej strany */
    border-top: 5px solid #000; /* 5px tučný čierny okraj plnej línie z vrchu */
    border-right: 5px solid #000; /* 5px tučný čierny okraj plnej línie zprava */
    border-bottom: 5px solid #000; /* 5px tučný čierny okraj plnej línie zľava */
    border-left: 5px solid #000; /* 5px tučný čierny okraj plnej línie zo spodu */
}

Pokiaľ nie je definovaná farba, farba okraju je automaticky rovnaká, ako farba textu daného elementu.

Typy okrajov môžu byť:

  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Outline

Vlastnosti Border a Outline je možné nakombinovať. V to prípade sa outine zobrazí nad borderom.

element {
    outline: #00FF00 dotted thick; /* zelený hrubý bodkovaný outline */
}

Box-shadow

div {
    box-shadow: 10px 15px 5px 20px #888888; /* sivý tieň okolo, vziadelý 15px od vrchu a 10px zľava o hrúbke 20px pri rozmazaní 5px */
}

Pokiaľ vynecháme farbu, automaticky zoberie farbu textu. Pokiaľ vynecháme hrúbku, veľkosť tieňa bude ako veľkosť elementu, inak sa zväčší tieň o zadanú veľkosť do každej strany.


Testové otázky

  • Je nutné definovať farbu pri zadávaní vlastností okraju (border)?
  • V akom poradí je potrebné definovať vlastnosti okraju (border)?
  • Načo slúži box-shadow?