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 }
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ęć:
Źródło: CSS Backgrounds and Borders Module Level 3
Przykład {border-image-slice}
Ramka wypełniona środkowym elementem siatki.
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.
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 |
Komentarze
- maromaro
27.04.2021 16:08
Box shadow można sobie wygodnie przetestować np. tutaj:
https://cssgenerator.pl/box-shadow-generator/
ja często korzystam z takich generatorów jak się uczę.
Zobacz więcej - Asokus
03.01.2017 22:37
Jeżeli użyję tej komendy (ustawię cień) dla diva i zaraz pod nim stworzę kolejnego to ten drugi div przyklei się do pierwszego tak że zasłoni ustawiony cień. Moje pytanie: Co zrobić aby cień rzucał się z priorytetem na wszystkie elementy strony? Dziękuję za odpowiedz!
Zobacz więcej - Comandeer
16.02.2016 23:06
Warto też od razu wspomnieć o border-image, mającym też sensowne wsparcie i pozwalającym na więcej: http://caniuse.com/#feat=border-image
Zobacz więcej - AzMoDaN
16.02.2016 22:49
Lepsza alternatywa na dziś: https://jsfiddle.net/0su56851/
Obsługiwane przez wszystko, co się liczy http://caniuse.com/#search=border-radius
Zobacz więcej - Gość
17.12.2015 12:58
u mnie wogóle nie działa czy wpiszę 1000px czy 1px nic nie zmienia :( czemu?
Zobacz więcej - Sick_Fantasy
20.05.2013 08:38
Ustawiałem w css dla kotwicy, ale znajomy już mnie skorygował, żebym dał dla obrazka to podziała i podziałało. :) Inne problemy też już udało się rozwiązać lepiej lub gorzej. ;)
Zobacz więcej - Roberto
20.05.2013 08:35
A dla jakiego elementu ustawiłeś brak obramowania? Ustawienie tego dla obrazków w odnośnikach działa zawsze.
Zobacz więcej - Sick_Fantasy
20.05.2013 07:06
Szerzej kwestie opisałem tu. http://www.forumweb.pl/tworzenie-stron-www/wyswietlanie-strony-pod-roznymi-przegladarkami,76434
Ale nikt nic nie napisał a potrzebuje pomocy.
Pod IE 8 w linkach z obrazkami wyskakuje mi obramowanie obrazka co generalnie psuje mi wygląd strony. Próbowałem to usunąć na...
Zobacz więcej - Roberto
08.05.2013 22:14
kamilexoN - tylko w nowszych przeglądarkach i nie w IE
http://caniuse.com/border-image
Zobacz więcej - kamilexoN
08.05.2013 18:51
Pytanko mianowicie mogę ustawić zdjęcie jako np. dolne obramowanie?
Zobacz więcej