CSS3 Border-Image Property tegemine Fotod tõesti lahe!
Piiride loomine pole midagi uut HTML & CSS; oleme alates algusest saanud piire lisada. Võib-olla olete tuttav tahkete piiridega, punktiirjoonega, katkendjoonega jne.
Kuid uue CSS3 piiripildi omadusega muutub HTML-elementide piiride loomine üha arenenumaks; lihtsalt, lihtsalt öeldes, saame nüüd lisada piiri, kasutades allikatena kujutist, mis võimaldab meil lisada atraktiivsemaid piire. Olgu, vaatame nüüd, kuidas see kinnisvara töötab.
Süntaksi ja brauseri tugi
CSS3 piiripilt on defineeritud järgmise stenogrammi süntaksiga:
border-image: [image source] [slice] [laius] [algus] [kordus];
Ülaltoodud süntaks on ametlik versioon W3C-st, mida toetab ainult Chrome, samas kui Opera, Firefox ja Safari vajavad ikka eesliide (-o-, -moz-, -webkit-) ja Internet Explorer ei üllata seda omadust üldse.
Lisaks sellele [laius] ja [algusest] väärtust piiripilt Omadused ei ole üheski brauseris veel toetatud, kuid laiuse väärtust saab asendada piiri laius vara.
Niisiis, lühidalt öeldes saame nüüd kasutada ainult väärtust [pildi allikas], [viil] ja [korrata] .
border-image: [image source] [slice] [kordus];
Image Slice
Enne kui me seda vara näitame, räägime sellest “pildi viil” esiteks, kuna see on midagi uut vara kinnistamisel. Siin kujutatud pildilõike määratleb kujutise lõigu, mis vastavalt võtab pildi servade ülemisest, paremast, alumisest ja vasakpoolsest lähtepunktist, mis seejärel jagab ka pildi üheksasse sektsiooni, nagu on kujutatud järgmise pildiga.
Ülaltoodud pildil näete, et sektsioonid 1, 3, 7 ja 9 muutub piiride nurkadeks ja sektsioonideks 2, 4, 6 ja 8 muutub piirjooneks või -jooneks, veendudes, et see osa, kus see muutub, on korduv või venitatav.
Viilude väärtust saab deklareerida a-ga pikslit ühik või protsent (%) paindlikuks mõõtmiseks.
rohkem viiteid:
- CSS taustad ja piirid 3. tase
Pildiraami loomine
Nüüd näitame kinnisvara reaalses näites.
Seekord me rakendame programmi piiripilt foto raami loomiseks kasutatav vara ja allikas kasutame allikat. Oleme pilti hoolikalt mõõtnud, nii et seda saab korralikult viilutada, korrata ja venitada olenemata sisu laiusest ja kõrgusest.
Märge: saate selle lingi alt üles laadida.
Samuti kasutame selles demonstratsioonis seda Meeldiva Cinemagraphi teie poolt pildina.
(Pildiallikas: minust sinu juurde)
Märgistus
Märgistus on sama lihtne:
Ära unusta asendada images_2 / css3-border-image-property-making-photos-tõesti-cool_3.jpg oma fotoga.
Stiilid
Ja siis anname selle raami kasutades piiripilt.
Kui vaatate ülaltoodud pilti, on meie kujutise laius 180 pikslit kokku. Seda väärtust saab seejärel jagada 6 iga jagunemine on 30tk; ja nii me tükeldame pildi 30tk.
Kui kasutate lõigu pikkuse väärtust, peaksite selle välja jätma px üksus, kuna see tõlgitakse automaatselt pikslit, aga kui te otsustate kasutada protsenti, peate ikka veel lisama (%).
Mis puudutab pildi kordamist, siis kasutame vaikimisi; korrake. Võite kasutada ka venitada ja ärge muretsege, piiripilt on endiselt graatsiline.
img border-image: url ("images / frame.png") 30 kordust; -o-border-image: url ("images / frame.png") 30 kordus; -moz-border-image: url ("images / frame.png") 30 kordust; -webkit-border-image: url ("images / frame.png") 30 kordust; piiri laius: 30 px; Lisaks tahame ka paigutada pildi brauseri akna keskele ning lisada dokumendile taustakuvandi, et muuta see kaalukamaks.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; kõrgus: 476px; laius: 675px; teksti joondamine: keskus; Olgu, ma arvan, et me oleme siin, nüüd vaatame seda brauseris.
- Demo
- Allalaadimise allikas
Kas sa tunned, et vaatate Maagilise Maagia maagilist maali?
Lõplik mõte
See piiripilt kahtlemata on kena lisand CSS3 perekonnas; me ei piirdu enam lihtsalt lihtsate piiridega.
Ja selles postituses oleme näidanud teile, kuidas me saame luua pildiraami, ilma et peaks muretsema selle sisu või sel juhul foto mõõtmete (laius ja kõrgus) pärast. Kõrgus ja laius võivad olla paindlikud, kui piiriallikas on korratav või venitatav.
Lõpuks, kui sa oled ikka veel veidi segaduses piiripilt, on olemas tööriist, mille abil saate hõlpsamini luua: piiritööriist
