CSS3 הגבול תמונה נכס ביצוע תמונות ממש מגניב!
יצירת גבולות אינה חדשה HTML & CSS; הצלחנו להוסיף גבולות מאז ההתחלה. ייתכן שהכרתם גבולות מוצקים, גבולות מנוקדים, גבולות מקווקווים וכן הלאה.
אבל, עם המאפיין CSS3 הגבול החדש, יצירת גבולות על אלמנט HTML הופך להיות מתקדם יותר; ובכן, במילים פשוטות, אנחנו יכולים כעת להוסיף גבול באמצעות תמונה כמקור שיאפשר לנו להוסיף גבולות אטרקטיביים יותר. בסדר, עכשיו בואו נראה איך זה עובד.
תחביר ותמיכה בדפדפן
תמונת הגבול ב- CSS3 מוגדרת באמצעות התחביר הבא:
border-image: [image image] [פרוסה] [רוחב] [התחלה] [לחזור];
התחביר שלמעלה הוא הגרסה הרשמית מ- W3C הנתמכת רק ב- Chrome, ואילו Opera, Firefox ו- Safari עדיין דורשים את הגרסה המקודמת (-o-, -moz-, -WebKit-), ואת Internet Explorer באופן לא מפתיע אינו תומך בכלל זה רכוש.
יתר על כן, [רוחב] וה [התחלה] ערך זה תמונת גבול המאפיין עדיין אינו נתמך בדפדפנים כלשהם, אולם ניתן להחליף את ערך הרוחב באמצעות רוחב גבול נכס.
אז, בקיצור, לעת עתה אנחנו יכולים רק ליישם את הערך של [מקור תמונה], [פרוסה] ו [חזור] .
border-image: [image image] [פרוסה] [לחזור];
תמונה פרוסה
לפני שנמשיך להדגים את המאפיין הזה, בואו נדבר על זה “פרוסת תמונה” הראשון כמו שזה משהו חדש להכריז על רכוש. פרוסת התמונה כאן תגדיר את החתך של התמונה אשר בהתאמה לוקח את נקודת ההתחלה מלמעלה, ימין, תחתונה, ושמאל של קצוות התמונה, כי לאחר מכן גם לחלק את התמונה לתוך תשעה חלקים, כפי שמוצג עם התמונה הבאה.
בתמונה למעלה, תראה את הקטעים 1, 3, 7 ו 9 יהיה הפינות של הגבול, ואת הסעיפים 2, 4, 6 ו 8 יהפוך את הגבול הגבול או שורה, ולוודא כי הקטע שבו הוא יהפוך את הקצה הוא הדיר או stretchable.
הערך של פרוסות ניתן להכריז עם פיקסל יחידה או אחוז (%) יחידה למדידה גמישה.
הפניות נוספות:
- רקע וגבולות CSS רמה 3
יצירת מסגרת תמונה
עכשיו, בואו להדגים את הנכס בדוגמה אמיתית.
הפעם, אנחנו הולכים ליישם את תמונת גבול רכוש כדי ליצור מסגרת תמונה ואנו נשתמש בתמונה למטה כמקור. יש לנו למדוד בקפידה את התמונה כך שזה יכול להיות פרוס כראוי, חזר ומותח ללא תלות רוחב התוכן והגובה.
הערה: אתה יכול להוריד את התמונה לעיל מהקישור הזה.
כמו כן, בהפגנה זו נשתמש זה cinemagraph מדהים על ידי ממני לך כמו בתמונה.
(מקור התמונה: ממני אליך)
הסימון
הסימון הוא פשוט כמו זה:
אל תשכח להחליף את images_2 / css3-border-image-property-making-photos-really-cool_3.jpg עם תמונה שלך.
סגנונות
ואז, בואו לתת לו מסגרת באמצעות תמונת גבול.
אם אתה מסתכל על התמונה לעיל, רוחב התמונה שלנו הוא 180px בסך הכל. לאחר מכן ניתן לחלק את הערך הזה 6 אשר כל חלוקה להיות 30px; ולכן אנו פורסים את התמונה עבור 30px.
אם אתה משתמש ערך אורך עבור פרוסה, אתה צריך להוציא את px יחידה, כפי שהוא יתורגם באופן אוטומטי ל פיקסל, אבל אם תחליט להשתמש באחוזים אתה עדיין צריך להוסיף את (%).
באשר לחזרה על התמונה, נשתמש בברירת המחדל. חזור. לחלופין, ניתן להשתמש למתוח ואל תדאג, תמונת הגבול עדיין תראה חינני.
img border-image: url ("images / frame.png") 30 חזור; -o-border-image: url ("images / frame.png") 30 חזור; -moz-border-image: url ("images / frame.png") 30 חזור; -webkit-border-image: url ("images / frame.png") 30 חזור; border-width: 30px; בנוסף, אנו רוצים גם למקם את התמונה במרכז חלון הדפדפן, כמו גם להוסיף מרקם רקע למסמך כדי להפוך אותו משכנע יותר.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; גובה: 476px; width: 675px; text-align: center; בסדר, אני חושב שאנחנו עושים כאן, עכשיו בואו לראות את זה בדפדפן.
- הדגמה
- הורד מקור
האם אתה מרגיש כאילו אתה מסתכל על ציור קסום בהוגוורטס?
מחשבה סופית
זה תמונת גבול ללא ספק היא תוספת נחמדה במשפחת CSS3; אנחנו כבר לא להיות מוגבל גבולות פשוטים פשוטים.
וב פוסט זה, הראינו לך כיצד נוכל ליצור מסגרת תמונה מבלי לדאוג לתוכן או במקרה זה ממדי התמונה (רוחב וגובה). הגובה והרוחב יכולים להיות גמישים, כל עוד מקור הגבולות ניתן לשחזור או למתוח.
לבסוף, אם אתה עדיין קצת מבולבל תמונת גבול, יש כלי שבו אתה יכול להשתמש כדי לעזור לך ליצור אחד בקלות רבה יותר: כלי תמונה הגבול
