CSS3 Border-Image nepremičnina Making Photos resnično Cool!
Ustvarjanje meja ni nič novega v HTML & CSS; od začetka smo lahko dodali meje. Morda ste poznali trdne meje, pikčaste meje, črtkane meje in tako naprej.
Toda z novo lastnostjo CSS3 border-image ustvarjanje meja na elementu HTML postaja vse bolj napredno; Preprosto povedano, zdaj lahko dodamo mejo z uporabo podobe kot vira, ki nam bo omogočila, da dodamo privlačnejše meje. V redu, poglejmo, kako deluje ta lastnina.
Skladnja in podpora za brskalnik
Slika obrobe v CSS3 je določena z naslednjo skrajšano sintakso:
border-image: [slikovni vir] [rezina] [širina] [začetek] [ponovitev];
Zgornja skladnja je uradna različica W3C, ki je podprta samo v Chromu, medtem ko Opera, Firefox in Safari še vedno zahtevajo predpono (-o-, -moz-, -webkit-) in Internet Explorer ne preseneča, da te lastnosti sploh ne podpira.
Poleg tega [premer] in [začetek] vrednost mejna slika lastnost še ni podprta v nobenem brskalniku, vendar pa lahko vrednost širine zamenjate z meja-širina nepremičnine.
Skratka, za zdaj lahko uporabimo samo vrednost [vir slike], [rezina] in [ponovitev] .
border-image: [vir slike] [slice] [ponovite];
Slice slike
Preden nadaljujemo s prikazovanjem te lastnine, se pogovorimo o “rezina slike” prvič, ker je nekaj novega pri razglasitvi lastnine. Slikovna rezina tukaj bo določila izrez slike, ki bo na začetku od zgoraj, desno, spodaj in levo od robov slike, ki bo nato razdelil sliko na devet odsekov, kot je prikazano na naslednji sliki..
Na zgornji sliki boste videli razdelke 1, 3, 7 in 9 postanejo robovi meje in odseki 2, 4, 6 in 8 bo postal mejni rob ali črta, tako da bo odsek, kjer bo postal rob, ponovljiv ali raztegljiv.
Vrednost rezin lahko označimo z a pixel ali odstotek (%) enota za fleksibilno merjenje.
več referenc:
- Ozadja in meje CSS Stopnja 3
Ustvarjanje okvirja za fotografije
Zdaj pa prikažimo lastnost v resničnem primeru.
Tokrat bomo izvedli mejna slika Če želite ustvariti fotookvir, bomo kot vir uporabili sliko spodaj. Sliko smo skrbno izmerili, tako da jo lahko pravilno narežemo, ponovimo in raztegnemo, ne glede na širino in višino vsebine.
Opomba: sliko zgoraj lahko prenesete s te povezave.
Tudi v tej predstavitvi bomo uporabili ta osupljiv Cinemagraph, ki ga je napisal From Me to You kot fotografijo.
(Vir slike: Od mene do tebe)
Oznaka
Oznaka je tako preprosta:
Ne pozabite zamenjati images_2 / css3-border-image-property-making-photos-res-cool_3.jpg s svojo fotografijo.
Slogi
In potem mu dajmo okvir mejna slika.
Če pogledate sliko zgoraj, je naša širina slike 180 px skupaj. To vrednost lahko nato razdelimo na 6 vsak del je 30px; in tako bomo sliko razrezali 30px.
Če za rezino uporabite vrednost dolžine, jo morate izključiti px enota, saj se bo samodejno prevedla v pixel, če pa se odločite za uporabo odstotka, boste morali še dodati (%).
Za ponavljanje slik bomo uporabili privzeto nastavitev; ponovite. Lahko pa tudi uporabite raztezajo in ne skrbite, slika na meji bo še vedno videti elegantna.
img border-image: url ("images / frame.png") 30 ponovitev; -o-border-image: url ("images / frame.png") 30 ponovi; -moz-border-image: url ("images / frame.png") 30 ponovi; -webkit-border-image: url ("images / frame.png") 30 ponovi; meja-širina: 30px; Poleg tega želimo sliko postaviti v središče okna brskalnika in dodati dokumentu v ozadje, da bo bolj privlačno.
html ozadje: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; višina: 476px; širina: 675px; text-align: center; V redu, mislim, da smo končali tukaj, zdaj pa si jo moramo ogledati v brskalniku.
- Demo
- Prenesi vir
Ali menite, da gledate čarobno sliko v Hogwartsu?
Končna misel
To mejna slika nedvomno je lep dodatek v družini CSS3; nismo več omejeni na preproste navadne meje.
In v tem prispevku smo vam pokazali, kako lahko ustvarimo slikovni okvir, ne da bi skrbeli za vsebino ali v tem primeru dimenzije fotografije (širina in višina). Višina in širina sta lahko fleksibilni, če je mejni vir ponovljiv ali raztegljiv.
Nazadnje, če ste še vedno malo zmedeni mejna slika, obstaja orodje, ki ga lahko uporabite za lažje ustvarjanje: orodje za sliko obrobe
