CSS হোলো রঙ

CSS হোলো রঙ

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%); /* লাল */
}

আপনার নিজেই চেষ্টা করুন

আমাদের CSS রঙ HEX, RGB এবং HSL মানের বিষয়ে আরও জানাতে এই চ্যাপ্টারে শিখুন

রঙ বিপরীত করা হয়েছে

এই উদাহরণটিতে outline-color: invertএই কাজ করেছে, রঙ বিপরীত করেছে:

বিপরীত রঙের সমস্ত রঙের কাঁচা করা আউটলাইন

ইনস্ট্যান্স

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

আপনার নিজেই চেষ্টা করুন