Przejdź do treści

Obcięcie obramowania obrazkowego {border-image-slice}

Jak podzielić obramowanie graficzne na narożniki, krawędzie i środek?

CSS 3

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-slice}

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%.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari		Poziom wsparcia
min. 2,5 roku
border-image-slice: wartość15
2011-10-25		15
2012-08-28		12
2015-07-29		15
2013-07-02		6
2012-07-25		 100%

Komentarze #

Zobacz więcej komentarzy

Facebook