CSS Outline

-

في هذه الخاصية تُستخدم Outline لرسم خط حول محتويات element@@#s border.

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  Outline وبعدها نضيف الكود التالي: 

<!DOCTYPE html>
<html>
    <style>
        div{
            border: 2px solid gray;
             border-radius: 5px / 8px;
             font-size: larger;
             padding: 70px;
             margin: 70px;
             outline: #4CAF50 solid 10px;
        }
    </style>
<body>
   <div> outline تطبيق </div>            
</body>
</html>

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

يمكن من خلال هذه الخاصية التحكم بالأشياء التالية :
  • outline-width
  • outline-style
  • outline-color
وهذا ما تم تطبيقه في المثال السابق طبقنا العرض 10px و Style من النوع solid واللون 4CAF50#

تمام طريقة الكتابة بتكون بالشكل: 

outline: outline-width outline-style outline-color;
نتعرف على القيم التي يمكن تطبيقها في parameter الي تستخدم مع (outline-width)

يمكن تطبيق قيم مختلفة على outline-width والتي قد تكون واحد من : 

القيمة
الوصف
fixed

قيمة ثابتة تكون ب px, em

مثال 

div { outline-width: 2px; }

thin

رسم خط بقيمة قد تكون 1 بكسل أو 2 بكسل حسب المتصفح

مثال 

div { outline-width: thin; }

medium

رسم خط بقيمة قد تكون 3 بكسل أو 4 بكسل حسب المتصفح

مثال 

div { outline-width: medium; }

thick

رسم خط بقيمة قد تكون 5 بكسل أو 6 بكسل حسب المتصفح

مثال 

div { outline-width: thick; }

تعرف على القيم التي يمكن تطبيقها في parameter الي تستخدم مع (outline-style)

يمكن تطبيق قيم مختلفة على outline-style والتي قد تكون واحد من : 


القيمة
الوصف
none

لن يتم تطبيق أي شيء على الاطار no border

مثال

div { outline-style: none; }

dotted 

عرض الاطار بشكل نقط dotted

مثال 

div { outline-style: dotted; }

dashed 

عرض الاطار بشكل  متقطع dashed 

مثال 

div { outline-style: dashed; }

solid 

عرض الاطار بشكل متصل solid

مثال 

div { outline-style: dashed; }

double 

عرض الاطار بشكل مزدوج

مثال 

div { outline-style: double; }

Groove

عرض الاطار بشكل مجوف ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار

مثال 

div { outline-style: groove; }

ridge 

عرض الاطار بشكل مموج ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطا

مثال 

div { outline-style: ridge; }

inset

عرض الاطار بشكل داخلي ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار

مثال 

div { outline-style: inset; }

outset 

عرض الاطار بشكل خارجي ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الاطار

مثال 

div { outline-style: outset; }

تعرف على القيم التي يمكن تطبيقها في parameter الي تستخدم مع (outline-color)

يمكن تطبيق قيم مختلفة على outline-color والتي قد تكون واحد من : 

القيمة
الوصف
RRGGBB#

تطبيق لون باستخدام Hexadecimal

مثال 

p { outline-color: #FF0000; }

()rgb

تطبيق لون باستخدام RGB 

مثال 

p { outline-color: rgb(255,0,0); }

name

تطبيق لون باستخدام اسم اللون

مثال 

p { outline-color: red; }

Inverts 

يعكس لون الخلفية

مثال 

p { outline-color: invert; }

inherit

سيرث element لون border من parent element

مثال 

p { outline-color: inherit; }



امثلة :
p { outline: solid black; }
div { outline: 3px dashed #FF0000; }