Border-image - CSS-Tricks | Almanach CSS 2025

border-image to skrócona właściwość, która umożliwia użycie obrazu lub gradientu CSS jako obramowania elementu.

.module ( border-image: url(border.png.webp) 25 25 round; )

border-imageWłaściwość może być stosowany do każdego elementu, z wyjątkiem wewnętrznych elementów tabeli (na przykład t, TH, TD), kiedy border-collapsejest ustawione collapse.

Nieruchomości

Jedyną wymaganą własnością border-imageskrótu jest border-image-source. Pozostałe właściwości mają domyślne wartości początkowe, jeśli nie zostały określone. Oto border-imagewłaściwości w kolejności:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Ta właściwość określa źródło obrazu obramowania. Może to być adres URL, identyfikator URI danych, gradient CSS lub wbudowany plik SVG (chociaż obsługa wbudowanego SVG jest ograniczona, zobacz uwagi dotyczące używania SVG).

Wartość początkowa to none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Wartości tej właściwości informują przeglądarkę, gdzie „pokroić” obraz, aby utworzyć fragmenty obramowania. Obraz jest podzielony na 9 sekcji - cztery rogi, cztery boki i środek.

Osiem serc na obrazie „ramkowym” powiększonym, aby pokazać szczegóły. Czerwone linie oznaczają plasterki.

Jeśli uważasz, że to brzmi niedorzecznie, jesteś w dobrym towarzystwie. Kilka lat temu na blogu Erica Myera odbyła się długa dyskusja na ten temat, na której ważyło się wielu czołowych twórców frontendu.

W tym demie serce powtarza się wokół granicy elementu div. border-image-sourceObraz jest złożony obraz ośmiu z tej samej ikony serca, plastry tak, że pełny kształt serca jest używany na każdej stronie elementu.

Zobacz demo Pen border-image: icon border by CSS-Tricks (@ css-tricks) na CodePen.

Więcej uwag dotyczących użytkowania

Chociaż border-imagepoprawiono obsługę dla - jest obsługiwana bez prefiksu we wszystkich aktualnych wersjach przeglądarek - ustawienie borderstylu awaryjnego jest nadal opłacalne. Twoje zastępcze obramowanie będzie wyświetlane w przeglądarkach, które nie obsługują border-image, lub jeśli obraz się nie załaduje.

W przeciwieństwie do niektórych innych właściwości obramowania border-imagenie można animować. Nie można go również stylizować border-radius.

Jeśli zadeklarujesz a border-image-sourcei borderszerokość lub border-image-widthbez żadnych plasterków, cały niecięty obraz zostanie umieszczony w czterech rogach elementu, przeskalowany do określonej szerokości.

Związane z

border
border-collapse
box-sizing

Więcej informacji

border-image w CSS Background and Borders Module Level 3 CR
border-image w MDN
border-image.com, to narzędzie pozwala przesłać obraz i bawić się odcinkami obramowania, dopóki nie uzyskasz odpowiedniego, a następnie wygeneruje dla Ciebie CSS.
Objaśnienie obrazu granicznego z Dudley Storey.

Więcej wersji demonstracyjnych

Również z Dudley Storey, Practical border-image: responsywna ramka do zdjęć, demo CodePen. To dobry przykład rozsądnego wykorzystania obramowania obrazu na responsywnym obrazie. Zwróć uwagę, że „ramka” jest usuwana przy mniejszych rozmiarach ekranu.
Prawdziwe kropkowane obramowanie przy użyciu SVG i border-image, pióra Lucas Lemonnier. Rozwiązanie dla brzydkiej „kropkowanej” kwadratowej ramki, ta metoda daje naprawdę okrągłe kropki!
przycisk gradientu, pióro użytkownika CodePen GSSxGSS. Ładny przykład liniowego gradientu jako obrazu granicznego.
Film Strip, a Pen autorstwa Nicka Pettit. Być może nie jest to najbardziej praktyczne demo, jest to zabawny, artystyczny przykład tego, co możesz zrobić border-image.

Wsparcie przeglądarki

border-imagepierwotnie wymagane prefiksy dostawców we wszystkich przeglądarkach, które je obsługiwały. Teraz działa bez prefiksu w najnowszych wersjach wszystkich przeglądarek. Ta tabela pokazuje zarówno najwcześniejszą obsługę z przedrostkiem, jak i najwcześniejszą obsługę bez przedrostka, jeśli ma to zastosowanie.