CSS Border Each Side

حواف CSS - حافة واحدة

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

في CSS، هناك بعض الخصائص يمكن استخدامها لتحديد كل حافة (الجزء العلوي، الأيمن، السفلي والأيسر):

实例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

النتيجة:

أنماط الحواف المختلفة

亲自试一试

أنماط الحواف المختلفة

نتيجة المثال السابق متطابقة:

实例

p {
  border-style: dotted solid;
}

亲自试一试

مبدأ عمله هو كالتالي:

如果 border-style ضبط الخصائص لأربعة أرقام:

border-style: dotted solid double dashed;

  • النسيج العلوي هو خطين غير واضحين
  • النسيج الأيمن هو خط مكتمل
  • النسيج السفلي هو خطين
  • النسيج الأيسر هو خط غير واضح

如果 border-style ضبط الخصائص لثلاثة أرقام:

border-style: dotted solid double;

  • النسيج العلوي هو خطين غير واضحين
  • 右和左边框是实线
  • النسيج السفلي هو خطين

如果 border-style 属性设置两个值：

border-style: dotted solid;

  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

  • 四条边均为虚线

实例

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}
/* 三个值 */
p {
  border-style: dotted solid double; 
}
/* 两个值 */
p {
  border-style: dotted solid; 
}
/* 一个值 */
p {
  border-style: dotted; 
}

亲自试一试

上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。