Przejdź do zawartości

CSS/Obramowanie

Z Wikibooks, biblioteki wolnych podręczników.
< CSS


CSS/Obramowanie

Odstęp wewnętrzny



border

[edytuj]

border - Określa wszystkie cechy obramowania na wszystkich krawędziach:

border: styl wielkość kolor;
styl - wygląd obramowania: wielkość - rozmiar obramowania: kolor - kolor obramowania
  • solid - jednolite ciągłe
  • dotted - kropkowane
  • dashed - kreskowane
  • double - podwójne
  • groove - wklęsłe
  • ridge - wypukłe
  • inset - wklejające
  • outset - uwypuklające
  • none - brak obramowania

Można podać konkretną wartość np. 2px lub jedną ze stałych:

  • thin - cieńkie obramowanie
  • medium - średnie obramowanie
  • thick - grube obramowanie

Kolor w Jednostkach koloru np.:

  • #389DFC
  • rgb(82, 185, 82)
  • red

border-style border-width border-color

[edytuj]

Atrybuty z grupy border-* określają konkretną cechę dla całego obramowania:

  • border-style: styl - wygląd obramowania:
  • border-width: wielkość - rozmiar obramowania:
  • border-color: kolor - kolor obramowania

Stosuje się gdy potrzeba zmienić tylko jedną cechę obramowania a pozostałe pozostawić domyślne.

Kod... ...jest równoznaczny z...
border-style:solid;
border-width: thick;
border-color:red;
border:solid thick red;
border-style:dotted;
border-width: 20cm;
border-color:#ED952F;
border:dotted 20cm #ED952F;

border-top border-bottom border-left border-right

[edytuj]

Atrybuty te określają cechy jednej z krawędzi (górnej,dolnej,lewej,prawej) obramowania. Przyjmują zawartości jak ogólny border lecz dotyczą tylko jednej krawędzi.

border-top:solid thin blue;
border-left:dotted medium red;
border-right:double thick green;
border-bottom:ridge 4px orange;

border-top-style border-bottom-style border-left-style border-right-style border-top-width border-bottom-width border-left-width border-right-width border-top-color border-bottom-color border-left-color border-right-color

[edytuj]

Atrybuty z tej grupy są jednocześnie atrybutami określającymi daną cechę jak i konkretną krawędź obramowania.

Border-radius

[edytuj]

Oznacza zaokrąglone rogi np:

border: solid; border-radius: 15px;
border: solid; -moz-border-radius: 15px;
border: solid; -webkit-border radius: 15px;

Uwaga: atrybut nie działa we wszystkich przeglądarkach. Ponadto w niektórych wymaga przedrostka -moz lub -webkit-. Najlepiej wartość podawać trzykrotnie (z 2 przedrostkami oraz bez)