خصائص الحدود CSS
المغلق border خصائص تسمح لك لتحديد نمط والعرض ولون الحدود للعناصر.
هذا العنصر لديه حدود الأخدود الذي هو 15px اسعة وخضراء.
نمط الحدود
و border-style تحدد الخاصية أي نوع من الحدود لعرضه.
يسمح القيم التالية:
-
dotted- يعرف الحدود منقط -
dashed- يعرف الحدود متقطع -
solid- يعرف حدودا صلبة -
double- تعريف الحدود مزدوج -
groove- يعرف الحدود مخدد 3D. تأثير يعتمد على قيمة الحدود لون -
ridge- يعرف الحدود مخدد 3D. تأثير يعتمد على قيمة الحدود لون -
inset- يعرف الحدود 3D أقحم. تأثير يعتمد على قيمة الحدود لون -
outset- يعرف الحدود البداية 3D. تأثير يعتمد على قيمة الحدود لون -
none- يحدد ليس لها حدود -
hidden- يعرف حدودا خفية
و border-style الملكية يمكن أن يكون من أربعة القيم (على الحدود العلوي، الحد الأيمن، الحد السفلي، والحد الأيسر).
مثال
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}نتيجة:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
انها محاولة لنفسك »  | ملاحظة: لا شيء من خصائص الحدود CSS أخرى هو موضح أدناه يكون له أي تأثير إلا إذا كان border-style يتم تعيين الخاصية! |
|---|
عرض الحدود
على border-width تحدد الخاصية العرض من الحدود الأربعة.
عرض يمكن ان يحدد حجم معين (في px, pt, cm, em ، الخ) أو باستخدام واحدة من القيم المحددة مسبقا ثلاثة: رقيقة، متوسطة، أو سميكة.
على border-width الممتلكات يمكن أن يكون من أربعة القيم (على الحدود العلوي، الحد الأيمن، الحد السفلي، والحد الأيسر).
مثال
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
انها محاولة لنفسك » لون الحدود
على border-color يستخدم خاصية لتعيين لون الحدود الأربعة.
اللون يمكن تعيينها من قبل:
- name - تحديد اسم اللون، مثل "red"
- Hex - تحديد قيمة عرافة، مثل "#ff0000"
- RGB - تحديد قيمة RGB، مثل "rgb(255,0,0)"
- transparent
على border-color الملكية يمكن أن يكون من أربعة القيم (على الحدود العلوي، الحد الأيمن، الحد السفلي، والحد الأيسر).
إذا border-color لم يتم تعيين، فإنه يرث لون العنصر.
مثال
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} انها محاولة لنفسك » الحدود - الفردية الجانبين
من الأمثلة أعلاه رأيتم أنه من الممكن لتحديد الحدود مختلفة عن كل جانب.
في CSS، وهناك أيضا خصائص لتحديد كل الحدود (أعلى، يمين، أسفل، واليسار):
مثال
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} انها محاولة لنفسك » في المثال أعلاه يعطي نفس النتيجة كما يلي:
لذلك، وهنا هو كيف يعمل:
إذا كان border-style الخاصية لديه أربع قيم:
- border-style : منقط مزدوجة صلبة تحطمت.
- تنتشر كبار الحدود
- الحد الأيمن صلبة
- الحد السفلي هو مزدوج
- وتحطمت الحدود الأيسر
إذا كان border-style الخاصية لديه ثلاث قيم:
- border-style : تنتشر صلبة مزدوجة.
- تنتشر كبار الحدود
- الحدود اليمنى واليسرى صلبة
- الحد السفلي هو مزدوج
إذا كان border-style الملكية لها قيمتين:
- border-style : منقط الصلبة.
- الحدود العلوية والسفلية هي المنقطة
- الحدود اليمنى واليسرى صلبة
إذا كان border-style الملكية لها قيمة واحدة:
- border-style : منقط.
- كل الحدود الأربعة هي المنقطة
و border-style يستخدم الملكية في المثال أعلاه. ومع ذلك، فإنه يعمل أيضا مع border-width و border-color .
الحدود - الخاصية المختصرة
وكما ترون من الأمثلة أعلاه، هناك العديد من الخصائص التي يجب مراعاتها عند التعامل مع الحدود.
لتقصير رمز، فمن الممكن أيضا لتحديد خصائص كل الحدود الفردية في خاصية واحدة.
على border الخاصية هي خاصية الاختزال للخصائص الحدود الفردية التالية:
-
border-width -
border-style(مطلوب) -
border-color
المزيد من الأمثلة
جميع كبار خصائص الحدود في إعلان واحد
يوضح هذا المثال خاصية الاختزال لوضع كل من خصائص الحد العلوي في إعلان واحد.
تعيين نمط من الحد السفلي
يوضح هذا المثال كيفية تعيين نمط من الحد السفلي.
تعيين عرض الحد الأيسر
يوضح هذا المثال كيفية تعيين عرض الحد الأيسر.
تعيين لون الحدود الأربعة
يوضح هذا المثال كيفية تعيين لون الحدود الأربعة. ويمكن أن يكون من أربعة ألوان.
تعيين لون الحد الأيمن
يوضح هذا المثال كيفية تعيين لون الحدود الصحيح.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»
جميع خصائص CSS الحدود
| الملكية | وصف |
|---|---|
| border | يحدد كل خصائص الحدود في إعلان واحد |
| border-bottom | يحدد كل خصائص الحدود السفلية في إعلان واحد |
| border-bottom-color | يحدد لون الحد السفلي |
| border-bottom-style | يحدد أسلوب الحد السفلي |
| border-bottom-width | يحدد عرض الحد السفلي |
| border-color | يحدد لون الحدود الأربعة |
| border-left | يحدد كل خصائص الحد الأيسر في إعلان واحد |
| border-left-color | يحدد لون الحد الأيسر |
| border-left-style | يحدد أسلوب الحد الأيسر |
| border-left-width | يحدد عرض الحد الأيسر |
| border-right | يحدد كل خصائص الحدود الصحيحة في إعلان واحد |
| border-right-color | يحدد لون الحد الأيمن |
| border-right-style | يحدد أسلوب الحد الأيمن |
| border-right-width | يحدد عرض الحد الأيمن |
| border-style | يحدد نمط من الحدود الأربعة |
| border-top | يحدد جميع كبار خصائص الحدود في إعلان واحد |
| border-top-color | يحدد لون الحد العلوي |
| border-top-style | يحدد أسلوب الحد العلوي |
| border-top-width | يحدد عرض الحد العلوي |
| border-width | تعيين عرض الحدود الأربعة |