Riba-vaizdas - CSS-gudrybės | CSS almanachas 2025

border-image yra sutrumpinta ypatybė, leidžianti naudoti atvaizdo arba CSS gradientą kaip elemento kraštinę.

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

border-imageTurtas gali būti taikomas bet kurio elemento, išskyrus vidaus stalo elementų (pvz TR, d, td), kai border-collapseyra nustatytas collapse.

Savybės

Vienintelis reikalingas turtas border-imagestenografijai yra border-image-source. Kitoms ypatybėms numatytos pradinės vertės, jei jos nenurodytos. Šios border-imagesavybės yra eilės tvarka:

`border-image-source`

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

Ši ypatybė nurodo kraštinio vaizdo šaltinį. Tai gali būti URL, duomenų URI, CSS gradientas arba tiesioginis SVG (nors vidinis SVG palaikymas yra ribotas, žr. SVG naudojimo pastabas).

Pradinė vertė yra none.

`border-image-slice`

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

Šios ypatybės reikšmės nurodo naršyklei, kur „supjaustyti“ vaizdą, kad būtų sukurtos kraštinės dalys. Vaizdas suskirstytas į 9 dalis - keturis kampus, keturias puses ir centrą.

Aštuonios širdys „rėmo“ atvaizde, padidintos, kad būtų rodoma detalė. Raudonos linijos nurodo riekeles.

Jei manote, kad tai skamba priešingai, esate geroje kompanijoje. Prieš kelerius metus Erico Myerio tinklaraštyje vyko ilgos diskusijos šia tema, kur pasisuko daugybė priekinės įrangos kūrėjų.

Šioje demonstracijoje širdis kartojasi aplink divo sieną. border-image-sourceVaizdas yra sudėtinis vaizdas aštuonių to paties širdies piktogramą, griežinėliais taip, kad visa širdis forma yra naudojama ant kiekvieno elemento pusėje.

Peržiūrėkite „Pen border-image demo: icon border“ CSS-Tricks (@ css-tricks) „CodePen“.

Daugiau naudojimo pastabų

Nors palaikymas border-imagepatobulėjo - jis palaikomas be prefiksų visose dabartinėse naršyklės versijose, bordervis tiek verta nustatyti atsarginį stilių. Atsarginė kraštinė bus rodoma naršyklėse, kurios nepalaiko border-imagearba jei nepavyksta įkelti vaizdo.

Skirtingai nuo kai kurių kitų krašto ypatybių, border-imagejų negalima animuoti. Tai taip pat negali būti stiliaus border-radius.

Jei deklaruojate a border-image-sourceir borderplotį arba border-image-widthbe jokių skiltelių, visas nesupjaustytas vaizdas bus dedamas į keturis elemento kampus, mastelį keičiant pagal jūsų nurodytą plotį.

Susijęs

border
border-collapse
box-sizing

Daugiau informacijos

border-image CSS pagrindų ir sienų 3 lygio CR modulio
border-image MDN
border-image.com, šis įrankis leidžia jums įkelti vaizdą ir žaisti su krašto gabalėliais, kol juos sutvarkysite, tada jis sugeneruos CSS.
Pasienio vaizdas paaiškintas iš Dudley Storey.

Daugiau demonstracinių versijų

Taip pat iš „Dudley Storey“, „Praktinis sienos vaizdas“: reaguojantis paveikslų rėmas, „CodePen“ demonstracinė versija. Tai yra geras pavyzdys, kaip protingai naudoti kraštinį vaizdą reaguojančiame paveikslėlyje. Atkreipkite dėmesį, kad „rėmelis“ pašalinamas mažesnio dydžio ekranuose.
Tikros punktyrinės kraštinės, naudojant SVG ir „border-image“, Lucaso Lemonnierio rašiklį. Bjaurios kvadratinės „punktyrinės“ sienos sprendimas - šis metodas suteikia jums tikrus apvalius taškus!
gradiento mygtukas, „CodePen“ vartotojo rašiklis „GSSxGSS“. Gražus linijinio gradiento kaip kraštinio vaizdo pavyzdys.
Filmo juosta, Nicko Pettito rašiklis. Galbūt ne pats praktiškiausias demonstracinis variantas, tai yra įdomus, dailus pavyzdys to, ką galite padaryti border-image.

Naršyklės palaikymas

border-imageiš pradžių reikėjo pardavėjo priešdėlių visose jį palaikančiose naršyklėse. Dabar jis veikia nenustatytas naujausioje visų naršyklių versijoje. Šioje lentelėje pateikiama ir ankstyviausia priešdėlinė atrama, ir, jei taikoma, anksčiausia nepatvirtinta atrama.