CSS/Obramowanie

Z Wikibooks, biblioteki wolnych podręczników.
< CSS
Przejdź do nawigacji Przejdź do wyszukiwania




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
    3by2white.svg
  • dotted - kropkowane
    3by2white.svg
  • dashed - kreskowane
    3by2white.svg
  • double - podwójne
    3by2white.svg
  • groove - wklęsłe
    3by2white.svg
  • ridge - wypukłe
    3by2white.svg
  • inset - wklejające
    3by2white.svg
  • outset - uwypuklające
    3by2white.svg
  • none - brak obramowania
    3by2white.svg

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

  • thin - cieńkie obramowanie
    3by2white.svg
  • medium - średnie obramowanie
    3by2white.svg
  • thick - grube obramowanie
    3by2white.svg

Kolor w Jednostkach koloru np.:

  • #389DFC
    3by2white.svg
  • rgb(82, 185, 82)
    3by2white.svg
  • red
    3by2white.svg

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;
3by2white.svg
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)