CSS Shorthand Outline Property

-

هي خاصية الاختزال والاختصار، بمعني يمكن تجميع خصائص Outline في خاصية واحدة، الامر الذي يختصر الكثير من الوقت والجهد

هذه الخاصية تتعامل مع:
⦁ outline-width
⦁ outline-style (required)
⦁ outline-color

تمام خلونا نعمل امثلة عملية حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  OutlineShorthand وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        div{
            outline: 5px dotted red;
        }
    </style>
<body>
   <div> Outlines Sides تطبيق </div>            
</body>
</html>


شغل الصفحة ونشوف النتيجة (الصورة)


تمام في هذا المثال طبقنا امثلة على تغيير الجوانب الخاصة ب <Div> element . 
وللتذكير استخدمنا Internal CSS  في هذا المثال

طيب نفهم الكود:
طبقنا الكود التالي على <div>:
outline: 5px dotted red;
سيتم تطبيق هذا الكود على جميع الحواف في div وببتكون النتيجة :
عرض الاطار 5 px ،
 نمط الاطار dotted
لون الاطار احمر .

يمكن تطبيق هذا الكود على جانب واحد من Div 
مثال 
<!DOCTYPE html>
<html>
    <style>
        div{
            outline: 2px solid gray;
        }
    </style>
<body>
   <div> Outlines Sides تطبيق </div>            
</body>
</html>

نتيجة التنفيذ:

لاحظ انه تم تغيير الجانب الايسر ل Div حسب المدخلات.