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

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

সিনট্যাক্স

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

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

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

প্যারামিটার	বর্ণনা
`inset`	ঐচ্ছিক প্যারামিটার। যদি এটি নির্দিষ্ট করা থাকে, তাহলে ছায়া কন্টেইনারের ভিতরে হবে, যদি না নির্দিষ্ট করা থাকে - তবে বাইরে।
X অক্ষে সরণ	X অক্ষ বরাবর ছায়ার সরণ নির্দিষ্ট করে। ধনাত্মক মান ডানদিকে সরায়, ঋণাত্মক মান - বামদিকে।
Y অক্ষে সরণ	Y অক্ষ বরাবর ছায়ার সরণ নির্দিষ্ট করে। ধনাত্মক মান নীচের দিকে সরায়, ঋণাত্মক মান - উপরের দিকে।
ব্লার	ছায়ার ব্লার নির্দিষ্ট করে। মান যত বেশি হবে - ছায়া তত বেশি ব্লার হবে। ঐচ্ছিক প্যারামিটার। যদি নির্দিষ্ট না করা থাকে - ছায়া শার্প হবে।
ছায়ার রেডিয়াস	ছায়ার আকার নির্দিষ্ট করে। ধনাত্মক মান ছায়াকে প্রসারিত করে, ঋণাত্মক মান, বিপরীতভাবে, এটিকে সংকুচিত করে। ঐচ্ছিক প্যারামিটার। যদি নির্দিষ্ট না করা থাকে - ছায়া এলিমেন্টের আকারের মতোই হবে।
রং	যেকোনো রংয়ের ইউনিটে ছায়ার রং নির্দিষ্ট করে। ঐচ্ছিক প্যারামিটার। যদি নির্দিষ্ট না করা থাকে - ছায়ার রং টেক্সটের রংয়ের সাথে মিলে যায়।

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

উদাহরণ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

আরও দেখুন

text-shadow প্রপার্টি,
যা টেক্সটকে ছায়া দেয়