Obramowanie

W tym rozdziale dowiesz się...

Styl obramowania

  1. Styl górnego obramowania:
    selektor { border-top-style: styl }
  2. Styl dolnego obramowania:
    selektor { border-bottom-style: styl }
  3. Styl lewego obramowania:
    selektor { border-left-style: styl }
  4. Styl prawego obramowania:
    selektor { border-right-style: styl }
We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "styl" należy wpisać:
  • none - brak obramowania

    Przykład:

    border-top-style: none

  • hidden - ukryte obramowanie (nie obsługuje MSIE 4)

    Przykład:

    border-top-style: hidden

  • dashed - linia kreskowa (nie obsługuje MSIE 5)

    Przykład:

    border-top-style: dashed

  • dotted - linia kropkowa (nie obsługuje MSIE 5)

    Przykład:

    border-top-style: dotted

  • solid - linia ciągła

    Przykład:

    border-top-style: solid

  • double - linia ciągła podwójna

    Przykład:

    border-top-style: double

  • groove - "rowek"

    Przykład:

    border-top-style: groove

  • ridge - "grzbiet"

    Przykład:

    border-top-style: ridge

  • inset - "ramka"

    Przykład:

    border-top-style: inset

  • outset - "przycisk"

    Przykład:

    border-top-style: outset

Atrybuty mieszane stylu obramowania

selektor { border-style: wartości atrybutów }
Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości stylu obramowania (rozdzielone spacjami), analogicznie jak w przypadku stylu pojedynczego obramowania.

Polecenie pozwala ustalić kilka wartości stylu obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi naraz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • trzech wartości - pierwsza określa górną krawędź, druga - jednocześnie obie pionowe, a ostatnia - dolną
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

Przykład:

border-style: dashed

border-style: double solid

border-style: double solid dashed

border-style: groove ridge inset outset

Szerokość obramowania

  1. Szerokość górnego obramowania:
    selektor { border-top-width: szerokość }
  2. Szerokość dolnego obramowania:
    selektor { border-bottom-width: szerokość }
  3. Szerokość lewego obramowania:
    selektor { border-left-width: szerokość }
  4. Szerokość prawego obramowania:
    selektor { border-right-width: szerokość }
We wszystkich przypadkach Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "szerokość" należy podać:
  • thin - cienkie obramowanie
  • medium - średnie obramowanie
  • thick - grube obramowanie
  • lub konkretną wartość w jednostkach długości

Pozwala zdefiniować szerokość dowolnego brzegu obramowania.

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-top-width: 5mm; border-top-style: solid

border-top-width: thin; border-top-style: solid

border-top-width: medium; border-top-style: solid

border-top-width: thick; border-top-style: solid

Atrybuty mieszane szerokości obramowania

selektor { border-width: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości (rozddzielone spacjami), analogicznie jak w przypadku szerokości pojedynczego obramowania.

[Zobacz także: Wstawianie stylów]

Polecenie pozwala ustalić kilka wartości szerokości obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi naraz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • trzech wartości - pierwsza określa górną krawędź, druga - jednocześnie obie pionowe, a ostatnia - dolną
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-width: 2mm; border-style: solid

border-width: thin thick; border-style: solid

border-width: thin thick medium; border-style: solid

border-width: thin medium thick 3mm; border-style: solid

Kolor obramowania

  1. Kolor górnego obramowania:
    selektor { border-top-color: kolor }
  2. Kolor dolnego obramowania:
    selektor { border-bottom-color: kolor }
  3. Kolor lewego obramowania:
    selektor { border-left-color: kolor }
  4. Kolor prawego obramowania:
    selektor { border-right-color: kolor }
We wszystkich przypadkach jako "kolor" należy podać definicję koloru.

[Zobacz także: Wstawianie stylów]

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-top-color: red; border-top-style: solid

Atrybuty mieszane koloru obramowania

selektor { border-color: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości koloru (rozddzielone spacjami), analogicznie jak w przypadku koloru pojedynczego obramowania.

[Zobacz także: Wstawianie stylów]

Polecenie pozwala ustalić kilka wartości kolorów obramowania jednocześnie. Możliwe jest przy tym podanie:

  • jednej wartości - dla wszystkich krawędzi naraz
  • dwóch wartości - osobno dla krawędzi poziomych i pionowych
  • trzech wartości - pierwsza określa górną krawędź, druga - jednocześnie obie pionowe, a ostatnia - dolną
  • czterech wartości - osobno dla kolejnych krawędzi (górna prawa dolna lewa)

UWAGA! W Internet Explorerze 6 polecenie działa poprawnie, tylko jeśli określony został jednocześnie styl obramowania.

Przykład:

border-color: red; border-style: solid

border-color: red blue; border-style: solid

border-color: red blue green; border-style: solid

border-color: red blue green #eb3; border-style: solid

Atrybuty mieszane obramowania

  1. Atrybuty mieszane górnego obramowania:
    selektor { border-top: wartości atrybutów }
  2. Atrybuty mieszane dolnego obramowania:
    selektor { border-bottom: wartości atrybutów }
  3. Atrybuty mieszane lewego obramowania:
    selektor { border-left: wartości atrybutów }
  4. Atrybuty mieszane prawego obramowania:
    selektor { border-right: wartości atrybutów }
  5. Atrybuty mieszane całego obramowania:
    selektor { border: wartości atrybutów }
Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości, stylu (obowiązkowo!) i koloru obramowania (rozddzielone spacjami).

[Zobacz także: Wstawianie stylów]

Polecenie pozwala podać w jednej komendzie kilka atrybutów obramowania jednocześnie, które mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać:

border-width: medium; border-style: solid; border-color: blue
wystarczy podać:
border: medium solid blue
a otrzymamy ten sam efekt.

Przykład:

border-top: thick double green

border: medium solid blue


Ciekawym zastosowaniem dolnego obramowania może być uzyskanie efektu podkreślenia o różnym stylu, kolorze i grubości:

<span style="border-bottom: 3px solid red">...</U>

<span style="border-bottom: 3px double red">...</span>

<span style="border-bottom: 1px dashed red">...</span>


Aby skrócić zapis i ułatwić późniejsze modyfikacje, można posłużyć się klasą selektorową, tzn. w arkuszu stylów wpisujemy np.:

*.podkreslenie { border-bottom: 2px #f80 solid }
a następnie na stronie:
<span class="podkreslenie">...</span>

Innym ciekawym przykładem może być zagnieżdżanie obramowania:

<div style="border: solid red 3px">
	<div style="border: solid green 3px">
		<div style="border: solid blue 3px">
			Potrójnie zagnieżdżone obramowanie
		</div>
	</div>
</div>
Potrójnie zagnieżdżone obramowanie

Styl obrysu

selektor { outline-style: styl }
Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "styl" należy wpisać:
  1. none - brak obrysu.

    Przykład:

    outline-style: none

  2. dashed - linia kreskowa.

    Przykład:

    outline-style: dashed

  3. dotted - linia kropkowa.

    Przykład:

    outline-style: dotted

  4. solid - linia ciągła.

    Przykład:

    outline-style: solid

  5. double - linia ciągła podwójna.

    Przykład:

    outline-style: double

  6. groove - "rowek".

    Przykład:

    outline-style: groove

  7. ridge - "grzbiet".

    Przykład:

    outline-style: ridge

  8. inset - "ramka"

    Przykład:

    outline-style: inset

  9. outset - "przycisk"

    Przykład:

    outline-style: outset

UWAGA! Polecenie nie jest interpretowane przez MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Obrys jest zbliżony swoim wyglądem do obramowania. Istnieją jednak pewne różnice:

  • Obrys nie zajmuje miejsca w modelu pudełkowym i dlatego nie wpływa na rozmiary ani pozycję żadnych elementów.
  • Obrys nie musi być prostokątem.
  • Jest tworzony zawsze na wierzchu elementu.
  • Można ustawiać atrybuty obrysu tylko w stosunku do wszystkich boków jednocześnie (nie da się tego robić oddzielnie dla każdego).

Szerokość obrysu

selektor { outline-width: szerokość }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "szerokość" należy podać:

UWAGA! Należy jednocześnie podać styl obrysu.

Polecenie nie jest interpretowane przez MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

outline-width: 2mm

Kolor obrysu

selektor { outline-color: kolor }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "kolor" należy wpisać definicję koloru. Wpisanie invert ustali kolor będący odwróceniem barw koloru tła.

UWAGA! Należy jednocześnie podać styl obrysu.

Polecenie nie jest interpretowane przez MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

outline-color: blue

Atrybuty mieszane obrysu

selektor { outline: wartości atrybutów }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości (oddzielone spacjami) jakie mają przyjąć atrybuty obrysu.

Polecenie pozwala podać kilka atrybutów obrysu w jednej komendzie (podobnie jak przy obramowaniu).

UWAGA! Polecenie nie jest interpretowane przez MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

outline: medium solid blue

Odstęp obrysu

(CSS 3 - interpretuje Firefox, Opera, Chrome)

selektor { outline-offset: rozmiar }
Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "rozmiar" należy podać odstęp wyrażony w jednostkach długości.

Standardowo obrys jest rysowany bezpośrednio na krawędzi elementu. Możemy go jednak nieco od niego odsunąć, jeśli uważamy, że dzięki temu będzie on wyglądał bardziej estytycznie.

Przykład:

outline-offset: 10px

obrys bez odstępu

Zaokrąglenie

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

  1. Zaokrąglenie górnego-lewego narożnika:
    selektor { border-top-left-radius: zaokrąglenie }
  2. Zaokrąglenie górnego-prawego narożnika:
    selektor { border-top-right-radius: zaokrąglenie }
  3. Zaokrąglenie dolnego-prawego narożnika:
    selektor { border-bottom-right-radius: zaokrąglenie }
  4. Zaokrąglenie dolnego-lewego narożnika:
    selektor { border-bottom-left-radius: zaokrąglenie }
We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast "zaokrąglenie" określa promień wyrażony w jednostkach długości albo w procentach (względem obszaru obramowania - zobacz: Model pudełkowy). Możliwe jest tutaj podanie:
  • jednej wartości - zaokrąglenie symetryczne
  • dwóch wartości - pierwsza określa poziomy promień ćwiartki elipsy zaokrąglenia, a druga - pionowy

Promienie zaokrąglenia ćwiartki elipsy

Źródło: CSS Backgrounds and Borders Module Level 3

Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz.

Przykład:

border-top-right-radius: 10px

Atrybuty mieszane zaokrąglenia

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

selektor { border-radius: wartości atrybutów }
Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości zaokrąglenia rozdzielone spacjami (w kolejności: górne-lewe, górne-prawe, dolne-prawe, dolne-lewe).

Polecenie pozwala ustalić kilka wartości promieni zaokrąglenia jednocześnie. Możliwe jest przy tym podanie:

  • zaokrąglenie symetryczne - promień pionowy będzie taki sam jak poziomy (np.: "5px 10px 15px 20px")
  • zaokrąglenie niesymetryczne - pionowe promienie zaokrąglenia można podawać po znaku ukośnika (np.: "5px 10px 15px 20px / 20px 15px 10px 5px")

Pominięcie wybranych wartości (zarówno w przypadku pierwszego jak i drugiego sposobu) spowoduje, że przyjmą one wartości takie jak narożnik leżący po drugiej stronie przekątnej elementu.

Przykład:

border-radius: 5px 10px 15px 20px

border-radius: 10px 20px / 20px 10px

Dekoracja przełamania obramowania

(CSS 3 - interpretuje Firefox 32, Opera 12-)

selektor { box-decoration-break: dekoracja }
Selektorem może być dowolny znacznik, np. p - akapit czy a - odsyłacz [zobacz: Wstawianie stylów].

Natomiast jako "dekoracja" należy wpisać:
  • clone - każdy fragment przełamanego elementu będzie miał osobne obramowanie
  • slice - wszystkie fragmenty przełamanego elementu będą miały wspólne obramowanie (domyślnie)

Zdarza się, że na wydruku blok zostanie przełamany pomiędzy dwie kartki w taki sposób, że jego początek znajdzie się na końcu jednej strony, a koniec - na samym początku następnej. W takim przypadku standardowo na dole pierwszego fragmentu ani na górze drugiego nie będzie obramowania. Podobnie jeśli obramowanie zostanie przypisane do długiego elementu wyświetlanego w linii, tak że tekst się przełamie na końcu wiersza, przy prawym marginesie ani w następnej linijce przy lewym nie będzie obramowania. Taki efekt może nie wyglądać estetycznie. Można mu jednak zapobiec za pomocą deklaracji "box-decoration-break: clone".

Przykład:

To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza...

box-decoration-break: clone; To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza... To jest element wyświetlany w linii, któremu nadano obramowanie. Zwróć uwagę, co się z nim dzieje w momencie przełamania wiersza...

Cień

(CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome)

  1. Cień na zewnątrz elementu:
    selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor,... }
  2. Cień wewnątrz elementu:
    selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... }
Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane):
  • poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
  • pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
  • rozmycie - promień efektu rozmycia (opcjonalnie)
  • rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie)
  • kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion", "rozmycie" oraz "rozprzestrzenienie" należy podać, używając jednostek długości.

Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.

Aby zupełnie usunąć ustalony wcześniej cień, należy podać box-shadow: none [Zobacz także: Wstawianie stylów]

Powyższe polecenie pozwala wprowadzić efekt cienia pod dowolnym elementem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.

Przykład:

box-shadow: 5px 5px 10px

box-shadow: inset 5px 5px 10px;

box-shadow: 0 0 20px 10px red

box-shadow: 3px 3px 10px red, yellow -3px 3px 10px, 3px -3px 10px

Obramowanie obrazkowe

Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź ramki, dolna krawędź oraz boczne krawędzie w postaci grafiki powielanej w pionie.

Przykład:

Tak wyglądają osobne części krawędzi obramowania (środkowy obrazek zostanie powielony w pionie, więc wystarczy, żeby miał wysokość 1px):

górna grawędz ramki
boczne krawędzie ramki
dolna krawędz ramki

Wykonanie ramki graficznej wymaga użycia następujące go kodu HTML:

<div class="ramka">
	<div class="ramka_pojemnik">
		<div class="ramka_zawartosc">
			...
		</div>
	</div>
</div>

...oraz CSS:

.ramka {
	background: url(obramowanie.gif) no-repeat top;
	padding-top: 12px;
	width: 200px;
}

.ramka_pojemnik {
	background: url(obramowanie2.gif) no-repeat bottom;
	padding-bottom: 12px;
}

.ramka_zawartosc {
	background: #92C892 url(obramowanie3.gif) repeat-y center;
	padding: 0 12px;
	color: #031;
}

Uzyskany efekt:

To jest przykład tradycyjnie wykonanego "obramowania" obrazkowego. Wymaga zagnieżdżenia w sobie aż trzech bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana.

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-source: url(ścieżka dostępu do obrazka) }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako obramowanie. Wpisanie "none" usunie obrazek.

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!

Za pomocą CSS 3 można dużo łatwiej wykonać obramowanie obrazkowe - przygotowując tylko jedną grafikę, przedstawiającą krawędzie obramowania. Nie będzie również konieczne osadzanie na stronie dodatkowych znaczników. Uzyskamy przy tym efekt samoczynnego dopasowywania się grafiki obramowania do rozmiarów ramki oraz dużo większe możliwości kompozycyjne.

Przykład:

border-image-source: url(punkt.gif); border-width: 32px
Bez określenia dodatkowych własności obramowania graficznego (obcięcie, szerokość, nawis, powtarzanie), obrazek jest umieszczany jedynie w narożnikach, zastępując normalne obramowanie niegraficzne.

Obcięcie obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-slice: obcięcie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "obcięcie" należy podać podziałkę (domyślnie: 100%), według której obrazek zostanie pocięty na siatkę, składającą się z dziewięciu części: czterech narożników, czterech krawędzi i środka.

Możliwe jest przy tym podanie:

  • jednej wartości - określa jednakowe odległości cięć linii siatki od wszystkich krawędzi obrazka; jeżeli cała grafika będzie kwadratowa i jako obcięcie podamy wartość trzy razy mniejszą od długości boku obrazka, to uzyskamy siatkę w postaci dziewięciu równych kwadratów - jak na ściance kostki Rubika
  • dwóch wartości - pierwsza określa odległości cięć linii siatki od górnej i od dolnej krawędzi, natomiast druga - od lewej i prawej
  • trzech wartości - pierwsza określa odległości cięć linii siatki od górnej krawędzi, druga - od lewej i prawej, natomiast trzecia - od dolnej
  • czterech wartości - ustala oddzielne odległości cięć linii siatki od kolejnych krawędzi obrazka: górnej, prawej, dolnej, lewej

Wartość obcięcia może być wyrażona liczbą naturalną (w przypadku obrazów rastrowych odpowiada wprost pikselom) albo procentami (wyrażonymi względem wymiarów grafiki). Dodatkowo na końcu wartości obcięcia po znaku spacji można dopisać słowo kluczowe fill. Oznacza ono, że środek ramki również zostanie wypełniony grafiką - powieloną ze środkowego prostokąta siatki obrazka obramowania.

Przykładowo, podając deklarację "border-image-slice: 25% 30% 12% 20%", uzyskamy następującą siatkę obcięć:

Ilustracja siatki obcięć obrazka obramowania: 25% 30% 12% 20%

Źródło: CSS Backgrounds and Borders Module Level 3

Przykład:

border-image-source: url(punkt.gif); border-image-slice: 5 10; border-width: 5px 10px

border-image-source: url(punkt.gif); border-image-slice: 10 15 fill; border-width: 5px 10px
Ramka wypełniona środkowym elementem siatki.

border-image-source: url(punkt.gif); border-image-slice: 50%; border-width: 16px
Podanie wartości obcięcia większej lub równej 50% wymiaru obrazka spowoduje, że grafika obramowania zostanie umieszczona jedynie w narożnikach elementu. Dzieje się tak dlatego, że narożne części siatki wytną wtedy całą dostępną powierzchnię elementu, a więc nie zostanie już nic na grafikę krawędzi obramowania.

border-image-source: url(punkt.gif); border-image-slice: 75%; border-width: 24px
Części siatki mogą na siebie zachodzić - dla wartości obcięcia powyżej 50%.

Szerokość obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-width: szerokość }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "szerokość" należy podać konkretną wartość wyrażoną w jednostkach długości, procentach (względem całkowitego obszaru obramowania obrazkowego) lub jako liczba naturalna (podająca wielokrotność szerokości obramowania). Wpisanie auto ustali wartość automatyczną.

Możliwe jest przy tym podanie:

  • jednej wartości - określa jednakową szerokość wszystkich krawędzi
  • dwóch wartości - pierwsza określa szerokość górnej i dolnej krawędzi, natomiast druga - lewej i prawej
  • trzech wartości - pierwsza określa szerokość górnej krawędzi, druga - lewej i prawej, natomiast trzecia - dolnej
  • czterech wartości - ustala oddzielne szerokości kolejnych krawędzi: górnej, prawej, dolnej, lewej

Przykład:

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px
Sterując szerokością obramowania obrazkowego możemy udekorować krawędzie elementu, który w ogóle nie posiada tradycyjnego obramowania. W takim przypadku grafika obramowania wchodzi pod zawartość tekstową - podobnie jakby była wstawiona w tle.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px
Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego.

border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px
Dla porównania - tak wygląda ten sam element, ale bez ustalania szerokości obramowania obrazkowego.

Nawis obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-outset: nawis }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "nawis" należy podać wartość szerokości wystającej poza krawędź tradycyjnego obramowania, wyrażoną w jednostkach długości lub jako liczba naturalna (podająca wielokrotność szerokości obramowania).

Możliwe jest przy tym podanie:

  • jednej wartości - określa jednakową szerokość nawisu poza wszystkie krawędzie obramowania
  • dwóch wartości - pierwsza określa szerokość nawisu poza górną i dolną krawędź obramowania, natomiast druga - poza lewą i prawą
  • trzech wartości - pierwsza określa szerokość nawisu poza górną krawędź obramowania, druga - poza lewą i prawą, natomiast trzecia - poza dolną
  • czterech wartości - ustala oddzielne szerokości nawisów poza kolejne krawędzie obramowania: górną, prawą, dolną, lewą

Nawis obramowania obrazkowego to jego część wystająca na zewnątrz poza krawędzie tradycyjnego obramowania elementu. Dodanie nawisu nie wpływa na położenie elementu - element najpierw jest renderowany w określonym miejscu na stronie, a dopiero potem jest do niego ewentualnie dorysowywany nawis. Skutkiem tego może być zmniejszenie się faktycznie widocznego marginesu elementu, oddzielającego go do sąsiednich bloków. Jeżeli szerokość marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu.

Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco:

Nawis wystaje poza krawędzie tradycyjnego obramowania elementu.

Źródło: CSS Backgrounds and Borders Module Level 3

Przykład:

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-outset: 7px; border-width: 15px
Połączenie szerokości obramowania i nawisu tylko częściowo wystającego poza jego krawędzie.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px; border-image-outset: 15px
Jeżeli element nie posiada tradycyjnego obramowania, nawis będzie wystawał poza krawędzie samego elementu.

border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 15px
Dla porównania to samo, ale bez nawisu.

Powtarzanie obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

selektor { border-image-repeat: powtarzanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "powtarzanie" należy wpisać:
  • stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie)
  • repeat - obrazek zostanie powielony na całej powierzchni
  • round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, zostanie on rozciągnięty w taki sposób, aby nie był przycięty)
  • space - powielenie z dopasowaniem odstępów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, pusta przestrzeń pomiędzy sąsiednimi powtórzeniami obrazka zostanie dobrana w taki sposób, aby obrazek nie był przycięty)

Przykład:

border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: stretch; border-width: 10px
Domyślny sposób powtarzania obrazka w obramowaniu.

border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: repeat; border-width: 10px
Standardowe powielenie - część grafiki obramowania może być przycięta.

border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: round; border-width: 10px
Powielenie z dopasowaniem rozmiarów - grafika obramowania nie powinna być przycięta, a ewentualnie dopasowana poprzez rozciągnięcie.

border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: space; border-width: 10px
Powielenie z dopasowaniem odstępów - grafika obramowania nie powinna być przycięta, a ewentualnie zwiększona pusta przestrzeń pomiędzy sąsiednimi obrazkami w obramowaniu.

Atrybuty mieszane obramowania obrazkowego

(CSS 3 - interpretuje Internet Explorer 11, Firefox 15, Opera 15, Chrome)

selektor { border-image: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości obramowani obrazkowego: źródło, obcięcie, szerokość, nawis i powtarzanie.

Polecenie pozwala w sposób skrócony wypełnić wszystkie atrybuty obramowania obrazkowego. Ważne jest przy tym zachowanie właściwej kolejności oraz odpowiednich znaków rozdzielających kolejne wartości. Lista atrybutów może się składać z trzech części:

  1. źródła
  2. obcięcia / szerokości / nawisu - możliwe są kombinacje:
    border-image-slice
    border-image-slice / border-image-width
    border-image-slice / border-image-width / border-image-outset
  3. powtarzania

Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład:

div { border-image: url(punkt.gif) 10 }	/* border-image-source: url(punkt.gif); border-image-slice: 10 */
div { border-image: url(punkt.gif) 10 / 10px }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px */
div { border-image: url(punkt.gif) 10 / 10px / 5px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px */
div { border-image: url(punkt.gif) 10 / 10px / 5px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 / 10px repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-repeat: reptat */
div { border-image: url(punkt.gif) 10 repeat }	/* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: reptat */
div { border-image: url(punkt.gif) repeat }	/* border-image-source: url(punkt.gif); border-image-repeat: reptat */

Przykład:

border-image-source: url(punkt.gif) 10 / 10px / 5px repeat