فهرست سرفصل‌های CSS
خانه (Home) CSS مقدمه CSS (Introduction) سینتکس CSS (Syntax) انتخاب گرهای CSS (Selectors) نحوه استفاده از CSS (How To) کامنت ها در CSS (Comments) ارورها در CSS (Errors) رنگ ها در CSS (Colors) رنگ ها - RGB و RGBA رنگ ها - هگز (HEX Colors) رنگ ها - HSL و HSLA پس زمینه (Backgrounds) پس زمینه - تصویر (Backgrounds Image) پس زمینه - تکرار تصویر (Backgrounds Image Repeat) پس زمینه - پیوست (Background Attachment) پس زمینه - کوتاه نویسی (Background Shorthand) کادرها (Borders) کادرها - عرض (Borders Width) کادرها - رنگ (Borders Color) کادرها - کناره ها (Borders Sides) کادرها - کوتاه نویسی (Shorthand Border Property) کادرها - گرد (Rounded Borders) لایه (Padding) ارتفاع، عرض و حداکثر عرض (Height, Width and Max-width) مدل جعبه ای (Box Model) خط پیرامونی (Outline) خط پیرامونی - ضخامت (Outline Width) خط پیرامونی - رنگ (Outline Color) خط پیرامونی - کوتاه نویسی (Outline Shorthand) خط پیرامونی - آفست (Outline Offset) متن - رنگ (Text Color) متن - چینش (Text Alignment) متن - تزئینات (Text Decoration) متن - تبدیل حروف (Text Transformation) متن - فاصله گذاری (Text Spacing) متن - سایه (Text Shadow) فونت ها (Fonts) فونت های وب سیف (Font Web Safe) فونت - جایگزین ها (Font Fallbacks) فونت - سبک (Font Style) فونت - اندازه (Font Size) فونت - گوگل (Font Google) فونت - کوتاه نویسی (Font Shorthand)
CSS

CSS — خط پیرامونی - کوتاه نویسی (Outline Shorthand)

آخرین بروزرسانی: 1404/07/13
قبلی: خط پیرامونی - رنگ (Outline Color) بعدی: خط پیرامونی - آفست (Outline Offset)

کوتاه نویسی خط پیرامونی (Outline Shorthand) در CSS

ویژگی «کوتاه نویسی خط پیرامونی (Outline Shorthand)» با خاصیت outline امکان تعیین هم زمان اجزای خط پیرامونی را می دهد. بنابراین، کد کوتاه تر می شود و همچنان خوانایی حفظ می گردد.

ویژگی outline به صورت کوتاه نویسی

خاصیت outline میان بُرِ سه ویژگی زیر است؛ ترتیب مقادیر اهمیتی ندارد و می توانید یک، دو یا سه مقدار بنویسید.

  • outline-width
  • outline-style (الزامی)
  • outline-color

نکته: برای آشنایی با اجزای مرتبط، به صفحات Outline Color و Outline سر بزنید.

نمونه های کوتاه نویسی خط پیرامونی

در مثال های زیر، از میان بُر outline برای تعیین سبک، رنگ و ضخامت استفاده شده است.

p.ex1 { outline: dashed; } p.ex2 { outline: dotted red; } p.ex3 { outline: 7px solid yellow; } p.ex4 { outline: thick ridge pink; }

کوتاه نویسی همراه با گوشه های گرد

می توانید در کنار کوتاه نویسی خط پیرامونی، با border-radius گوشه ها را گرد کنید.

p.ex1 { outline: dashed; border-radius: 8px; } p.ex2 { outline: dotted red; border-radius: 5px; } p.ex3 { outline: 7px solid yellow; border-radius: 5px; } p.ex4 { outline: thick ridge pink; border-radius: 8px; } p.ex5 { outline: thick solid green; border-radius: 10px; }

برای ادامه ی مباحث، صفحه Outline Offset را دنبال کنید. همچنین از عبارت کوتاه نویسی خط پیرامونی به عنوان راهنمای سریع استفاده کنید.

قبلی: خط پیرامونی - رنگ (Outline Color) بعدی: خط پیرامونی - آفست (Outline Offset)