6- حدود CSS

6- حدود CSS

تسمح لك خصائص حدود CSS بتحديد نمط وعرض ولون حدود العنصر.

نمط الحدود CSS

و border-styleيحدد ملكية أي نوع من الحدود إلى العرض.

القيم التالية مسموح بها:

  • dotted – تحديد حد منقط
  • dashed – تحديد حد متقطع
  • solid – يحدد حدًا متينًا
  • double – تحديد حد مزدوج
  • groove– يحدد حدًا محززًا ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الحدود
  • ridge– يحدد حدًا مموجًا ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الحدود
  • inset– يحدد حد داخلي ثلاثي الأبعاد. التأثير يعتمد على قيمة لون الحدود
  • outset– يحدد حدود البداية ثلاثية الأبعاد. التأثير يعتمد على قيمة لون الحدود
  • 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;}

عرض حدود CSS

و border-widthتحدد الخاصية العرض من الحدود الأربعة.

يمكن تعيين العرض كحجم معين (بالبكسل ، pt ، cm ، em ، إلخ) أو باستخدام إحدى القيم الثلاث المحددة مسبقًا: رفيع ، أو متوسط ​​، أو سميك:

مثال

مظاهرة لعرض الحدود المختلفة:

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

عروض جانبية محددة

على border-width الملكية يمكن أن يكون من أربعة القيم (على الحدود العلوي، الحد الأيمن، الحد السفلي، والحد الأيسر):

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

لون حدود CSS

تُستخدم border-colorالخاصية لتعيين لون الحدود الأربعة.

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

ألوان جانبية محددة

على border-color الملكية يمكن أن يكون من أربعة القيم (على الحدود العلوي، الحد الأيمن، الحد السفلي، والحد الأيسر). 

مثال

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

قيم HEX

يمكن أيضًا تحديد لون الحد باستخدام قيمة سداسية عشرية (HEX):

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

قيم RGB

أو باستخدام قيم RGB:

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

قيم HSL

يمكنك أيضًا استخدام قيم HSL:

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

حدود CSS – جوانب فردية

من الأمثلة الموجودة في الصفحات السابقة ، رأيت أنه من الممكن تحديد حدود مختلفة لكل جانب.

في CSS ، توجد أيضًا خصائص لتحديد كل من الحدود (أعلى ، يمين ، أسفل ، ويسار):

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

الحدود المستديرة border-radius

p {
  border: 2px solid red;
  border-radius: 5px;
}