Szerokość obramowania obrazkowego {border-image-width}
W jaki sposób podać szerokość (grubość) obramowania obrazkowego?
CSS 3
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ą.
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-width}
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.
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.
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.
Dla porównania - tak wygląda ten sam element, ale bez ustalania szerokości obramowania obrazkowego.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
border-image-width: wartość | 16 2011-12-13 | 13 2012-06-05 | 12 2015-07-29 | 15 2013-07-02 | 6 2012-07-25 |
border-image-width: auto | 16 2011-12-13 | 15 2012-08-28 | 12 2015-07-29 | 15 2013-07-02 | 6 2012-07-25 |