کناره‌های CSS

این عنصر دارای لبه‌های سیاه و لبه‌های آبی با پهنای 10px است.

کناره‌های CSS

لبه خطی است که در اطراف عنصر ترسیم می‌شود، در بیرون از لبه‌ها و برای برجسته‌سازی عنصر استفاده می‌شود.

CSS دارای ویژگی‌های لبه زیر است:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

توجه:لبه بالبهمتفاوت! تفاوت در این است که لبه در بیرون از لبه‌های عنصر ترسیم می‌شود و ممکن است با محتوای دیگر برخورد کند. همچنین، لبه بخشی از اندازه عنصر نیست؛ عرض و ارتفاع کل عنصر تحت تأثیر پهنای لبه نیست.

سبک لبه CSS

ویژگی outline-style لبه‌ها را مشخص می‌کند و می‌تواند به صورت زیر تنظیم شود:

  • dotted - لبه نقطه‌ای تعریف شده.
  • dashed - لبه خط افقی تعریف شده.
  • solid - لبه خط مستقیم تعریف شده.
  • double - لبه دو خط تعریف شده.
  • groove - لبه فرو رفته سوراخ 3D تعریف شده.
  • ridge - لبه برجسته سوراخ 3D تعریف شده.
  • inset - لبه فرو رفته 3D تعریف شده.
  • outset - لبه برجسته 3D تعریف شده.
  • none - لبه بدون لبه تعریف شده.
  • hidden - لبه پنهان تعریف شده.

در اینجا نمونه‌ای از ارزش‌های مختلف outline-style نشان داده شده است:

مثال

نمایش سبک‌های لبه مختلف:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

نتیجه:

کناره‌های نقطه‌ای.

کناره‌های خط‌های افقی.

کناره‌های خط مستقیم.

کناره‌های دو خطی.

کناره‌های فرو رفته در زاویه 3D. این اثر بستگی به مقدار outline-color دارد.

کناره‌های برآمده در زاویه 3D. این اثر بستگی به مقدار outline-color دارد.

کناره‌های فرو رفته 3D. این اثر بستگی به مقدار outline-color دارد.

کناره‌های برآمده 3D. این اثر بستگی به مقدار outline-color دارد.

آزمایش کنید

توجه:مگر اینکه تنظیم شده باشد outline-style اگر ویژگی outline استفاده نشود، سایر ویژگی‌های کناره (که در فصل بعد توضیح داده می‌شود) هیچ اثری نخواهند داشت!