Przejdź do treści

Obramowanie

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.

Komentarze

Zobacz więcej komentarzy