فهرست سرفصل‌های 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 Color)

آخرین بروزرسانی: 1404/07/13

رنگ خط پیرامونی (Outline Color) در CSS

ویژگی «رنگ خط پیرامونی (Outline Color)» با outline-color رنگ خطی را تعیین می کند که بیرون از کادر عنصر رسم می شود. برای مشاهده رنگ، معمولاً در کنار آن outline-style هم تعیین می شود.

روش های تعیین رنگ خط پیرامونی

رنگ می تواند با نام رنگ، مقدار HEX، مقدار RGB، مقدار HSL یا مقدار invert تنظیم شود. مقدار invert وارونه سازی رنگ انجام می دهد تا خط روی پس زمینه های مختلف قابل دیدن بماند.

  • name — مانند red
  • HEX — مانند #ff0000
  • RGB — مانند rgb(255,0,0)
  • HSL — مانند hsl(0, 100%, 50%)
  • invert — وارونه سازی رنگ برای افزایش کنتراست

نکته: خط پیرامونی جزو ابعاد واقعی عنصر نیست و بیرون از کادر رسم می شود. برای آشنایی بیشتر به Outline و Outline Width مراجعه کنید.

نمونه های رنگ خط پیرامونی

در این مثال، چهار رنگ مختلف برای خط پیرامونی به کار رفته است. توجه کنید که برای نمایش رنگ، سبک خط نیز مشخص شده است.

p { border: 1px solid black; padding: 5px; } p.ex1 { outline-style: solid; outline-color: red; } p.ex2 { outline-style: dotted; outline-color: blue; } p.ex3 { outline-style: outset; outline-color: green; } p.ex4 { outline-style: solid; outline-color: invert; }

استفاده از مقدار HEX

می توانید رنگ را با مقدار شانزده شانزدهی تعیین کنید.

p.ex1 { outline-style: solid; outline-color: #ff0000; /* red */ }

استفاده از مقدار RGB

یا از ترکیب های RGB استفاده کنید.

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

استفاده از مقدار HSL

همچنین می توانید از مدل HSL بهره ببرید.

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

برای دسترسی سریع، صفحه رنگ خط پیرامونی را نشانه گذاری کنید.