Robežas attēls - CSS-triki | CSS almanahs 2025

border-image ir stenogrāfijas rekvizīts, kas ļauj izmantot attēla vai CSS gradientu kā elementa robežu.

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

border-imageĪpašumu var attiecināt uz jebkuru elementu, izņemot iekšējiem galda elementu (piem tr, th, td), ja border-collapseir iestatīts uz collapse.

Rekvizīti

Vienīgais border-imagestenogrāfam nepieciešamais īpašums ir border-image-source. Pārējie rekvizīti noklusē sākotnējās vērtības, ja tās nav norādītas. Šīs border-imageīpašības ir secībā:

`border-image-source`

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

Šis rekvizīts norāda apmales attēla avotu. Tas var būt URL, datu URI, CSS gradients vai iekļauts SVG (lai gan iekšējam SVG atbalsts ir ierobežots, skatiet SVG lietošanas piezīmes).

Sākotnējā vērtība ir none.

`border-image-slice`

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

Šī rekvizīta vērtības norāda pārlūkprogrammai, kur “sagriezt” attēlu, lai izveidotu apmales gabalus. Attēls ir sadalīts 9 sekcijās - četros stūros, četrās pusēs un centrā.

Astoņas sirdis “rāmja” attēlā, kas palielināts, lai parādītu detaļas. Sarkanās līnijas norāda šķēles.

Ja jūs domājat, ka tas izklausās nepieklājīgi, jūs esat labā kompānijā. Pirms dažiem gadiem Ērika Ērera emuārā bija ilgstoša diskusija par šo tēmu, kur tika nosvērti daudzi frontendu attīstības lielnieki.

Šajā demonstrācijā ap divas robežu atkārtojas sirds. border-image-sourceAttēls ir salikts attēls astoņi no paša sirds ikonas šķēlēs tāpēc ka pilna sirds forma tiek izmantota katrā pusē no elementa.

Skatiet CSP-Tricks (@ css-tricks) pildspalvas attēla demonstrācijas: ikonu apmali CodePen

Vairāk lietošanas piezīmju

Lai gan atbalsts border-imagevietnei ir uzlabojies - visās pašreizējās pārlūkprogrammas versijās tas tiek atbalstīts bez prefiksiem, borderjoprojām ir vērts iestatīt rezerves stilu. Rezerves maliņa tiks parādīta pārlūkprogrammās, kuras neatbalsta border-imagevai ja attēlu neizdodas ielādēt.

Atšķirībā no dažiem citiem apmales īpašumiem, border-imagetos nevar animēt. To arī nevar ieveidot border-radius.

Ja deklarējat a border-image-sourceun borderplatumu vai border-image-widthbez šķēlītēm, viss nesagrieztais attēls tiks novietots četros elementa stūros, pielāgojot to norādītajam platumam.

Saistīts

border
border-collapse
box-sizing

Vairāk informācijas

border-image CSS fona un robežu moduļa CR 3. līmenī
border-image pie MDN
border-image.com, šis rīks ļauj augšupielādēt attēlu un spēlēt ar apmales šķēlītēm, līdz tās kļūst pareizi, un pēc tam tas ģenerē jums CSS.
Robežu attēls paskaidrots no Dadley Storey.

Vairāk demonstrāciju

Arī no Dudley Storey, Praktiskais robežas attēls: atsaucīgs attēla rāmis, CodePen demonstrācija. Šis ir labs piemērs, kā saprātīgi izmantot apmales attēlu uz atsaucīga attēla. Ievērojiet, ka “rāmis” tiek noņemts mazākos ekrāna izmēros.
Īstas punktētas apmales, izmantojot SVG un border-image, Lūkasa Lemonjē pildspalvu. Risinājums neglītajam kvadrātveida “punktētajam” apmalim, šī metode dod jums īstus apaļus punktus!
gradienta poga, CodePen lietotāja GSSxGSS pildspalva. Skaists lineārā gradienta kā apmales attēla piemērs.
Filmas lente, Nika Petita pildspalva. Varbūt nav vispraktiskākā demonstrācija, tas ir jautrs, izveicīgs piemērs tam, ar ko jūs varat darīt border-image.

Pārlūka atbalsts

border-imagesākotnēji bija nepieciešami pārdevēja prefiksi visos pārlūkos, kas to atbalstīja. Tagad tas darbojas bez prefiksiem visu pārlūkprogrammu jaunākajā versijā. Šajā tabulā ir parādīts gan agrākais prefiksu atbalsts, gan attiecīgais agrākais nepieliktais atbalsts.