رنگ کناره سی اس اس
- پچھلے پیج عرض کناره سی اس اس
- آئندہ پیج ویژگیهای کوتاه کناره سی اس اس
رنگ کناره سی اس اس
outline-color این ویژگی برای تنظیم رنگ حاشیه استفاده میشود.
شما میتوانید از طریق روشهای زیر رنگ را تنظیم کنید:
- name - نام رنگ را مشخص کنید، مانند "red"
- HEX - مقادیر هگزادسیمال را مشخص کنید، مانند "#ff0000"
- RGB - مقادیر RGB را مشخص کنید، مانند "rgb(255,0,0)"
- HSL - مقادیر HSL را مشخص کنید، مانند "hsl(0, 100%, 50%)"
- invert - انجام تغییر رنگ برعکس (مطمئن شوید که حاشیه قابل مشاهده است، صرف نظر از رنگ پسزمینه)
در مثال زیر، چندین نوع حاشیه با رنگهای مختلف نشان داده شده است. توجه داشته باشید که این عناصر همچنین دارای حاشیههای نازک سیاه در داخل حاشیه هستند:
حاشیههای خطی قرمز.
حاشیههای نقطهای آبی.
حاشیههای تیرهی خاکستری.
مثال
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
مقادیر HEX
شما همچنین میتوانید از مقادیر هگزادسیمال (HEX) برای تعیین رنگ حاشیه استفاده کنید:
مثال
p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* سرخ */
}
مقادیر RGB
یا از طریق استفاده از مقادیر RGB:
مثال
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* سرخ */
}
HSL کی قیمت
آپ HSL کی قیمت بھی استعمال کرسکتے ہیں:
مثال
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* لال */
}
آپ کرسکتے ہیں رنگ سی اس اس بخش میں HEX، RGB اور HSL کی قیمت کا مزید معلومات حاصل کرسکتے ہیں۔
کالر کا معکوس
یہ مثال outline-color: invert، کالر کا معکوس کیا گیا ہے۔ اس طرح کیا یقینی ہوتا ہے کہ کسی بھی رنگ کی پس منظر پر، منظر دیکھا جاسکتا ہے:
کالر کا معکوس رنگ کا سخت منظر
مثال
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
- پچھلے پیج عرض کناره سی اس اس
- آئندہ پیج ویژگیهای کوتاه کناره سی اس اس
