বক্স-শ্যাডো প্রপার্টি

box-shadow প্রপার্টিটি একটি ব্লককে ছায়া দেয়। মান হিসেবে প্রপার্টিটি 6টি প্যারামিটার নেয়, স্পেস দ্বারা আলাদা করে, অথবা none কীওয়ার্ড, যা ছায়া সম্পূর্ণভাবে বাতিল করে।

সিনট্যাক্স

cssসিলেক্টর {
  box-shadow: inset X_অক্ষে_সরণ Y_অক্ষে_সরণ ব্লার রেডিয়াস ছায়ার_রং;
}

cssসিলেক্টর {
  box-shadow: none;
}

প্যারামিটারসমূহ

অক্ষ বরাবর সরণ, ব্লার এবং ছায়ার রেডিয়াস যেকোনো সাইজের ইউনিটে নির্দিষ্ট করা যায়, শতাংশ বাদে।

উদাহরণ

এই উদাহরণে ছায়া নীচে এবং ডানে সরানো হয়েছে এবং少量 ব্লার যোগ করা হয়েছে:

html<div id="elem"></div>

css#elem {
  box-shadow: 5px 5px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

উদাহরণ . শার্প ছায়া

এই উদাহরণে ছায়া নীচে এবং ডানে সরানো হয়েছে, কিন্তু কোনো ব্লার নেই (ছায়া শার্প হবে):

html<div id="elem"></div>

css#elem {
  box-shadow: 2px 2px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

উদাহরণ . সমান ছায়া

এই উদাহরণে ছায়া সরানো হয়নি, কিন্তু এতে ব্লার যোগ করা হয়েছে:

html<div id="elem"></div>

css#elem {
  box-shadow: 0px 0px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

উদাহরণ . ছায়ার রেডিয়াস

এই উদাহরণে ছায়া সরানো হয়নি, ব্লার শূন্য, কিন্তু এতে রেডিয়াস যোগ করা হয়েছে (কালো হলো বর্ডার, লাল হলো ছায়া):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 0 3px red;
  border: 3px solid black;
  width: 300px;
  height: 50px;
}

Результат:

উদাহরণ . ব্লার + ছায়ার রেডিয়াস

এই উদাহরণে ছায়া সরানো হয়নি, কিন্তু এতে ব্লার এবং রেডিয়াস যোগ করা হয়েছে (কালো হলো বর্ডার, লাল হলো ছায়া):

html<div id="elem"></div>

css#elem {
  box-shadow: 0 0 3px 3px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

উদাহরণ . অভ্যন্তরীণ ছায়া

এই উদাহরণে ছায়া কন্টেইনারের ভিতরে অবস্থিত:

html<div id="elem"></div>

css#elem {
  box-shadow: inset 0 0 6px black;
  border: 1px solid black;
  width: 300px;
  height: 50px;
}

Результат:

আরও দেখুন