رنگ خط پیرامونی (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 */ }

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