CSS3 Border-Image Tulajdonságok készítése Fotók valóban jó!
A határok létrehozása semmi új HTML & CSS; a kezdetektől fogva határokat adhatunk. Lehet, hogy ismeri a szilárd határokat, a pontozott határokat, a szaggatott szegélyeket és így tovább.
Az új CSS3 határkép-tulajdonságokkal azonban a határelemek létrehozása a HTML elemen egyre fejlettebb; Nos, egyszerűen fogalmazva, most már képesek vagyunk hozzáadni egy határt egy forrásként, amely lehetővé teszi számunkra, hogy vonzóbb határokat adjunk hozzá. Rendben, nézzük meg, hogyan működik ez a tulajdonság.
Szintaxis és böngésző támogatás
A CSS3 határképe a következő rövidített szintaxissal van meghatározva:
border-image: [image source] [szelet] [szélesség] [kezdet] [ismétlés];
A fenti szintaxis a W3C hivatalos verziója, amelyet csak a Chrome támogat, míg az Opera, a Firefox és a Safari még mindig igényli az előtagot (-o-, -Moz-, -webKit-), és az Internet Explorer nem meglepő módon nem támogatja ezt a tulajdonságot.
Továbbá a [szélesség] és a [Eleve] értéket border-image a böngészők még nem támogatják a tulajdonságokat, azonban a szélesség értéket a border-width ingatlan.
Szóval, röviden, most csak az értéket tudjuk alkalmazni [képforrás], [szelet] és [ismétlés] .
border-image: [image source] [szelet] [ismétlés];
Kép szelet
Mielőtt továbblépnénk ezt a tulajdonságot, beszéljünk a “képszelet” először azért, mert valami újdonság a tulajdon kijelentésében. Az itt látható képszelet meghatározza a kép vágását, amely a kép szélének felső, jobb, alsó és bal oldaláról indul ki, ami később a képet kilenc részre osztja, amint azt a következő kép mutatja..
A fenti képen látható, hogy a szakaszok 1, 3, 7 és 9 lesz a határ sarkai, és a szakaszok 2, 4, 6 és 8 lesz a szegély vagy a vonal, és győződjön meg róla, hogy a szelvény, ahol a szél lesz, megismételhető vagy nyújtható.
A szeletek értékét a pixel egység vagy százalék (%) egység a rugalmas méréshez.
további hivatkozások:
- CSS háttér és határvonal 3. szint
Fényképkeret létrehozása
Most mutassuk be a tulajdonságot egy igazi példában.
Ezúttal a border-image a képkeret létrehozására szolgáló tulajdonság, és az alábbi képet használjuk forrásként. Gondosan mérjük a képet, így megfelelően szeletelhetjük, megismételhetjük és feszíthetjük a tartalom szélességétől és magasságától függetlenül.
Jegyzet: letöltheti a fenti képet a hivatkozásból.
Ebben a bemutatóban ezt a lenyűgöző Cinemagraph-ot is használjuk a From Me-től Önhöz, mint fotót.
(Képforrás: rólam én)
A jelölés
A jelölés olyan egyszerű, mint ez:
Ne felejtsd el kicserélni images_2 / CSS3-border-image-property-készítés-photos-nagyon-cool_3.jpg saját fényképével.
A stílusok
És akkor adjunk neki egy keretet border-image.
Ha megnézzük a fenti képet, a kép szélessége 180px összesen. Ezt az értéket ezután lehet osztani 6 melyik az egyes divíziók 30px; és így szeleteljük a képet 30px.
Ha a szelet hosszértékét használja, akkor ki kell zárnia a px egység, mivel automatikusan le lesz fordítva pixel, de ha úgy dönt, hogy a százalékot használja, akkor még hozzá kell adnia a (%).
Ami a képismétlést illeti, az alapértelmezettet fogjuk használni; ismétlés. Alternatív megoldásként használhatja kitágít és ne aggódj, a határkép még mindig kecses.
img border-image: url ("images / frame.png") 30 ismétlés; -o-border-image: url ("images / frame.png") 30 ismétlés; -moz-border-image: url ("images / frame.png") 30 ismétlés; -webkit-border-image: url ("images / frame.png") 30 ismétlés; határszélesség: 30px; Ezenkívül szeretnénk a képet a böngészőablak középpontjába helyezni, valamint hozzáadni egy háttér textúra a dokumentumhoz, hogy kényszerítőbb legyen.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; magasság: 476px; szélesség: 675px; szöveg-igazítás: központ; Rendben, azt hiszem, itt vagyunk, most nézzük meg egy böngészőben.
- Demó
- Letöltés forrása
Úgy érzi, mintha egy varázslatos festményt nézne a Roxfortban?
Végső gondolat
Ez border-image kétségtelenül szép kiegészítés a CSS3 családban; már nem korlátozódunk az egyszerű egyszerű határokra.
Ebben a bejegyzésben megmutattuk, hogyan hozhatunk létre képkeretet anélkül, hogy aggódnánk a tartalomról, vagy ebben az esetben a fénykép méreteiről (szélesség és magasság). A magasság és a szélesség rugalmas lehet, amennyiben a határforrás megismételhető vagy nyújtható.
Végül, ha még mindig egy kicsit zavarban van border-image, van egy eszköz, amellyel könnyebben hozhat létre: határkép eszköz
