سی ایس ایس چمک

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

سی ایس ایس چمک

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

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 ویژگی، در غیر این صورت سایر ویژگیهای چارچوب (که در فصل بعد توضیح داده خواهد شد) هیچ اهمیتی ندارند!