מדריך CSS מספר 11 - קו מתאר (Outline)

שלבים

1. 1

   שלב 1

   בדומה לגבולות גם לקווי המתאר ניתן להגדיר סוגים שונים של סגנונות לעיצוב, לדוגמא:
2. 2

   שלב 2

   h1.dashed {outline-style:dashed;} h1.solid {outline-style:solid;} h1.dotted {outline-style:dotted;} h1.inset {outline-style:inset;} h1.double {outline-style:double;} h1.ridge {outline-style:ridge;} h1.groove {outline-style:groove;} h1.outset {outline-style:outset;}
4. 3

   שלב 3

   שימו לב שקו המתאר אינו חלק מאלמנט הHTML כך שהוא לא נכלל בגובה וברוחב שלו.
5. 4

   שלב 4

   בדומה לרוב המאפיינים בCSS, ניתן להגדיר את צבע קו המתאר. אפשר להשתמש בRGB, מספר הקסדצימלי או במילים, לדוגמא:
6. 5

   שלב 5

   h1.color{outline-color:blue;}
7. 6

   שלב 6

   
   דוגמא מצויינת לקו מתאר outline שאתם נתקלים בו ביום יום, הוא קו המתאר סביב הכפתורים, כאשר אתם לוחצים על כפתור כלשהו ואז מופיע סביבו קו מתאר מקווקו. בתמונה רואים דוגמא שבה קו המתאר מופיע סביב "דף הבית" לאחר לחיצה.