কীভাবে কেবল একটি উপাদানের একপাশে ড্রপ শেড তৈরি করবেন?

Question

কেবল নীচে ছায়া ফেলে দেওয়ার কোনও উপায় আছে ?. আমার একে অপরের পাশে 2 টি চিত্র সহ একটি মেনু রয়েছে। আমি একটি সঠিক ছায়া চাই না কারণ এটি সঠিক চিত্রকে ওভারল্যাপ করে। আমি এটির জন্য চিত্রগুলি ব্যবহার করতে পছন্দ করি না তাই কেবল নীচের দিকে এটি ফেলে দেওয়ার মতো উপায় আছে:

box-shadow-bottom: 10px #FFF; অথবা সাদৃশ্যপূর্ণ?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

Comments

আপনার গৃহীত উত্তর রেফারেন্স box-shadow-bottomযা বিদ্যমান নেই এবং এটি কারও দ্বারা সমর্থিত নয়। লাইট বাক্স-ছায়া কৌশলগুলির জন্য নিকোলাসগাল্লাগার.com/css - DP - shadows - without - images/demo দেখুন ।

— পল আইরিশ

@ পল ... আমার একটি টাইপ ছিল, এটি ঠিক ছিল।

— হিস্তো

আপনার সিএসএস উদাহরণের মন্তব্যগুলি বিভ্রান্তিমূলক - filterআইই 8 এবং আই 9 তেও কাজ করবে। -ms-filterএই ক্ষেত্রে প্রয়োজন নেই ।

— ম্যাথিয়াস বাইনেস

: আপনি এই বাস্তবসম্মত আঁটা CSS ছায়া খাপ খাওয়ানো পারে stackoverflow.com/a/20596554/1491212

— Armel Larcier

Answer 1

আপডেট 4

আপডেট 3 এর মতো তবে আধুনিক সিএসএসের সাথে (= কম নিয়ম) যাতে ছদ্ম উপাদানটির জন্য কোনও বিশেষ অবস্থানের প্রয়োজন হয় না।

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

আপডেট 3

আমার পূর্ববর্তী সমস্ত উত্তরগুলি এই প্রভাবটি তৈরি করতে অতিরিক্ত মার্কআপ ব্যবহার করে আসছে, যা প্রয়োজন হয় না। আমি মনে করি এটি অনেক পরিষ্কার সমাধান ... একমাত্র কৌশলটি ছায়ার সঠিক অবস্থান এবং পাশাপাশি ছায়ার সঠিক শক্তি / অস্বচ্ছতা পেতে মানগুলির সাথে ঘুরে বেড়াচ্ছে। সিউডো-এলিমেন্ট ব্যবহার করে এখানে একটি নতুন ফিডল রয়েছে :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

এইচটিএমএল

<div id="box" class="box-shadow"></div>

সিএসএস

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

আপডেট 2

স্পষ্টতই, আপনি বাক্স-ছায়া সিএসএসের কেবলমাত্র অতিরিক্ত পরামিতি দিয়ে এটি করতে পারেন যেমন প্রত্যেকে প্রত্যক্ষভাবে নির্দেশ করেছেন। এখানে ডেমো:

http://jsfiddle.net/K88H9/821/

সিএসএস

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

এটি আরও ভাল সমাধান হবে। যুক্ত হওয়া অতিরিক্ত প্যারামিটারটি বর্ণনা করা হয়েছে:

চতুর্থ দৈর্ঘ্য একটি স্প্রেড দূরত্ব। ধনাত্মক মানগুলি ছায়ার আকারকে নির্দিষ্ট ব্যাসার্ধের দ্বারা সমস্ত দিকে প্রসারিত করে। নেতিবাচক মানগুলির কারণে ছায়া আকৃতির সংকোচন ঘটে।

হালনাগাদ

জেএসফিডেলে ডেমোটি দেখুন: http://jsfiddle.net/K88H9/4/

আমি যা করেছি তা হ'ল একটি "ছায়া উপাদান" তৈরি করে যা আপনার ছায়া রাখতে চাইবে এমন আসল উপাদানটির আড়ালে। "ছায়া উপাদান" এর প্রস্থটি আপনি যে ছায়াটি নির্দিষ্ট করেছেন তার চেয়ে 2 গুণ প্রকৃত উপাদানের তুলনায় ঠিক কম প্রশস্ত করতে পেরেছি; তারপরে আমি এটি সঠিকভাবে সারিবদ্ধ করেছি।

এইচটিএমএল

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

সিএসএস

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

আসল উত্তর

হ্যাঁ, আপনি সরবরাহ করেছেন একই সিনট্যাক্সের সাহায্যে এটি করতে পারেন। প্রথম মান অনুভূমিক অবস্থান নিয়ন্ত্রণ করে এবং দ্বিতীয় মান উল্লম্ব অবস্থান নিয়ন্ত্রণ করে। সুতরাং প্রথম মানটি সেট করুন 0pxএবং দ্বিতীয়টি আপনি যা পছন্দ করেন তা নীচে হিসাবে সেট করুন:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

বক্সের ছায়ায় আরও তথ্যের জন্য এগুলি পরীক্ষা করে দেখুন:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

আশা করি এটা কাজে লাগবে.

Comments

অস্পষ্ট ছায়া অর্জন করার জন্য আপনার অগত্যা একটি খালি ডিভ যুক্ত করার দরকার নেই। ঘোষণায় তৃতীয় মান: box-shadow: 0 2px 4px #000000একটি অস্পষ্ট মান। এখানে দেখুন http://jsfiddle.net/K88H9/7/ । তবে আপনি লক্ষ্য করবেন যে উপাদানটির বাম এবং ডানদিকে কিছুটা ঝাপসা রয়েছে, যেখানে হিস্টোর সমাধানে নেই।

কোনও বাক্স-ছায়া-নীচের সম্পত্তি নেই এবং এই প্রভাবটি অবশ্যই কোনও অতিরিক্ত উপাদানের প্রয়োজন নেই। ইশ।

— লেয়া ভেরো

box-shadow-bottomসৃজনশীল অবস্থায় বাস্তবে উপস্থিত নেই।

— মিকেতাইলার

চিল ছেলেরা ... এটি ছিল এক প্রকার 'টাইপো

— হ্রিস্টো

@ গ্রিজলি ... আমি আমার উত্তরটি সম্পাদনা করেছি, যতক্ষণ না সবাই এটিকে নির্দেশ না করে আমি আমার টাইপোটি দেখিনি। এর জন্যে দুঃখিত.

— হিস্তো

Answer 2

ছায়াকে আরও ছোট করতে ছড়িয়ে প্যারামিটারটি ব্যবহার করুন:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

লাইভ ডেমো: http://dabblet.com/gist/a8f8ba527f5cff607327

পক্ষগুলিতে কোনও ছায়া না দেখতে, স্প্রেড ব্যাসার্ধের (চতুর্থ প্যারামিটারের পরম মান) অস্পষ্ট ব্যাসার্ধের (তৃতীয় প্যারামিটার) সমান হওয়া দরকার।

Comments

এটি আসলে কাজ করে না। প্রথম নজরে এটি প্রদর্শিত হয় যেন ছায়া কেবল নীচে থাকে তবে বাস্তবে এটি এখনও পাশগুলি ছড়িয়ে পড়ে। সকলের উদাহরণগুলি মোটামুটি গা dark় নীল বাক্সের সাথে রয়েছে ... বাক্সটি সাদা করুন এবং আপনি সমস্ত ছায়া দেখতে পাবেন।

— ক্রিস এল

@ ক্রিস এম: স্রেফ স্প্রেড প্যারামিটার বাড়িয়ে নিন: এর সাথে ৪ টি উদাহরণ চেষ্টা করুন box-shadow:0 8px 4px -6pxএবং আপনি কেবল নীচের ছায়া দেখতে পাবেন!

— 30

আবারও বক্স সাদা করতে হিসাবে এই বেহালার এবং আপনি এখনও পক্ষের আপ সব পথ ছায়া দেখতে পাবেন এবং এটি এখন এটি নীচে জুড়ে সব পথ দেখা যায় না। আপনি পক্ষ থেকে পরিত্রাণ পেতে আপনি কতটা স্প্রেড প্যারামিটারে যেতে ইচ্ছুক? এছাড়াও, সম্ভবত 151 প্রতিবেদক কারও পক্ষে 7 কে রেপ সহ কারওর উত্তর সম্পাদনা না করা ভাল। একটি মন্তব্য এটি ছেড়ে।

— ক্রিস এল

@ T30 অবশ্যই স্প্রেড প্যারামিটারটি আরও কমিয়ে আপনি অবশেষে পক্ষগুলি থেকে মুক্তি পেতে পারেন। তবে এখন আপনার ছায়া আপনার বাক্সের প্রস্থের কাছাকাছি নয়। 72px ছায়া সহ আপনার একটি 84px বাক্স রয়েছে।

— ক্রিস এল

আপডেট উত্তর। তবে মূলত, স্প্রেড ব্যাসার্ধ কমাতে এবং ওয়াই অফসেটটি সামঞ্জস্য করার পক্ষে খুব বেশি কিছু করতে পারে না। হয়ত কোনও ছায়ার পরিবর্তে গ্রেডিয়েন্ট ব্যবহার করবেন? এছাড়াও, লোকেরা আমার পোস্টগুলি সম্পাদনা করে তাতে আপত্তি জানায় না, তবে কিছু ইংরিশের মতো ভাষায় লেখা বাক্য যুক্ত করতে লোকেরা আমার পোস্টগুলি সম্পাদনা করার প্রশংসা করি না। আমি হয় নেটিভ ইংলিশ স্পিকার নই এবং আমি চ্যালেঞ্জগুলি বুঝতে পারি, তবে আমি যদি অন্য কারও পোস্ট সম্পাদনা করতাম তবে আমি কমপক্ষে দ্বিগুণ যাচাই করার যথেষ্ট দায়িত্ব অনুভব করব যে আমি কী ধরণের যুক্ত করেছি তা বোধগম্য হয় এবং ব্যাকরণটি না বিব্রতকরভাবে ভুল।

— লেয়া ভারো

Answer 3

যদি আপনার পটভূমিতে স্থির রঙ থাকে, আপনি ব্যাকগ্রাউন্ডের একই রঙের দুটি রঙিন মুখোশযুক্ত ছায়া ছোঁয়া দিয়ে পার্শ্ব-ছায়া প্রভাবটি আড়াল করতে পারেন এবং অস্পষ্টতা = 0, উদাহরণস্বরূপ:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

নোট করুন যে কালো ছায়া অবশ্যই শেষ হতে হবে এবং কোণ থেকে অতিক্রম করতে বাধা দেওয়ার জন্য একটি নেতিবাচক স্প্রেড (-3px) থাকতে পারে।

এখানে বেহালার (মাস্কিং ছায়া রঙ কিভাবে এটি দেখতে পরিবর্তন সত্যিই কাজ করে)।

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Comments

transparentমাস্কিং শ্যাডোগুলির জন্য রঙটি ব্যবহার করা আরও ভাল হবে , না?

— অ্যাঞ্জেল জোসেফ পিসকোলা

@ অ্যাঞ্জেল জোসেফপিসকোলা: চতুর ইঙ্গিত .. উত্তরে প্রয়োগ করা হয়েছে, ধন্যবাদ!

— T30

@ টি 30 দুর্দান্ত, তবে মনে রাখবেন যে একটি স্বচ্ছ মাস্ক দিয়ে আপনার কোনও নির্দিষ্ট রঙের ব্যাকগ্রাউন্ডের প্রয়োজন হবে না;)

— অ্যাঞ্জেল জোসেফ পিসকোলা

আমি এটি আরও ভাল পরীক্ষা করেছি, এবং স্বচ্ছ ছায়া কাজ করে না , তাই আমি শেষ সম্পাদনাগুলি ফিরিয়ে দিয়েছি

— T30

Answer 4

আমার মনে হয় এই তুমি কি পরে?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Comments

মানুষ যখন বুঝতে না পারে তখন এটিকে ভালবাসুন। হ্যাঁ, তিনি প্রথম ছায়া (সাদা) ছড়িয়ে যাওয়ার সাথে জগাখিচুড়ি করছেন যা আসল ছায়া (কালো) এর প্রান্তিকিকে আবৃত করবে। নিখুঁত একমুখী ছায়া অর্জনের একমাত্র বুদ্ধিমান উপায়। বিশেষত দরকারী যখন আপনার কোনও মেনুতে 2 অংশে একই ছায়া থাকা প্রয়োজন।

— জেনো পপোভিচি

Answer 5

চশমা পড়াই সবসময় ভাল । এমন কিছু নেইbox-shadow-bottom সম্পত্তি নেই, এবং লেয়া নির্দেশ করে যেহেতু আপনার পূর্বনির্ধারিত সম্পত্তিগুলির পরে সর্বদা নীচে প্রাক-পূর্বনির্ধারিত সম্পত্তিটি রাখা উচিত।

তাই এটা:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Comments

পাশ থেকে ছায়া আছে

— shinzou

Answer 6

ওভারফ্লো লুকানোতে সেট করা আছে এবং নীচে কিছু প্যাডিং রয়েছে এমন একটি ডিভ ব্যবহারের কীভাবে? এটি অনেক সহজ সমাধান মত মনে হচ্ছে।

দুঃখের সাথে জানাচ্ছি যে আমি নিজেই এটি ভাবিনি তবে এটি অন্য কোথাও দেখেছি ।

বাক্স-ছায়া এবং একটি ওভারফ্লো পেয়ে উপাদানটি মোড়ানোর জন্য একটি উপাদান ব্যবহার করে: মোড়কের উপরে লুকিয়ে রাখা আপনি অতিরিক্ত বাক্স-ছায়াকে অদৃশ্য করে দিতে পারবেন এবং এখনও ব্যবহারযোগ্য সীমানা রাখতে পারবেন। এটি ছড়িয়ে পড়ার কারণে উপাদানটি যতটা ছোট মনে হয় সেখানে সমস্যাটিও স্থির করে।

এটার মত:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

সামগ্রী এখানে যায় goes

এখনও একটি চতুর সমাধান যখন এটি খাঁটি সিএসএসে করতে হয়!

যেমনটি বলেছেন জর্জেন ইভেন্টস ।

Comments

সমাধানের জন্য +1। ছাড়াও padding-bottom(আসুন বলতে 5px), তবে আপনাকে একটি নেতিবাচক স্থির করতে পারে margin-bottomযোগ স্থান ক্ষতিপূরণের জন্য (-5px এর)।

— fabio.sang

Answer 7

আপনি clip-pathসমস্ত উপচে পড়া প্রান্তটি ক্লিপ করতে (আড়াল করতে) ব্যবহার করতে পারেন তবে যেটি আপনি দেখাতে চান:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

দেখুন ক্লিপ-পথ (MDN) । আর্গুমেন্ট polygonহয় উপরে বাম পয়েন্ট, উপরের ডান পয়েন্ট, নিচের ডানদিকে পয়েন্ট, এবং নীচের বাম বিন্দু। নীচের প্রান্তটি 200%(বা তার চেয়ে বড় যে কোনও সংখ্যক 100%) এ সেট করে আপনি আপনার ওভারফ্লোটি কেবল নীচের প্রান্তে সীমাবদ্ধ করুন।

Comments

সুতরাং ... মৌলিক পদগুলিতে, ক্লিপ-পথটি ওভারফ্লো: স্টেরয়েডের গোপন সম্পত্তি। এটি পরিষ্কার। ;)

— ক্রেগ

Answer 8

আমারও ছায়া দরকার তবে কেবল একটি চিত্রের নীচে এবং কিছুটা বাম এবং ডানদিকে সেট করা। এটি আমার পক্ষে কাজ করেছে:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

এটিতে যে উপাদানটি প্রয়োগ করা হয় তা হ'ল পৃষ্ঠা-প্রশস্ত চিত্র (980px x 300px)।

সেটিংসের সাথে ফিড করার সময় যদি এটি সহায়তা করে তবে সেগুলি নিম্নলিখিত হিসাবে চালিত হয়:

অনুভূমিক ছায়া, উল্লম্ব ছায়া, অস্পষ্ট দূরত্ব, স্প্রেড (অর্থাত্ ছায়ার আকার) এবং রঙ।

Answer 9

ছায়া সন্ধান করা ভাল:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

এই কোডটি বর্তমানে স্ট্যাকওভারফ্লো ওয়েবে ব্যবহার করছে।

Answer 10

এই কোড পেনটি (আমার দ্বারা নয়) এটি করার খুব সহজ উপায় এবং অন্য পক্ষগুলি নিজেরাই বেশ সুন্দরভাবে দেখায়:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

Answer 11

যদি আপনার পটভূমিটি শক্ত হয় (বা আপনি এটি CSS ব্যবহার করে পুনরুত্পাদন করতে পারেন), আপনি লিনিয়ার গ্রেডিয়েন্টটি সেভাবে ব্যবহার করতে পারেন:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

এটি উপাদানটির নীচে একটি 5px গ্রেডিয়েন্ট উত্পন্ন করবে, কালো থেকে 30% অস্বচ্ছতা থেকে সম্পূর্ণ স্বচ্ছ to বাকি উপাদানটির সাদা ব্যাকগ্রাউন্ড রয়েছে। অবশ্যই, লিনিয়ার গ্রেডিয়েন্টের শেষ 2 রঙের স্টপগুলি পরিবর্তন করে আপনি পটভূমিটিকে সম্পূর্ণ স্বচ্ছ করতে পারেন।

Answer 12

আপনি কেবল নীচে একটি গ্রেডিয়েন্টও করতে পারেন - এটি আমার পক্ষে সহায়ক কারণ আমি যে ছায়াটি চেয়েছিলাম তা এমন একটি উপাদানটির উপর ছিল যা ইতিমধ্যে আধা স্বচ্ছ ছিল, তাই আমাকে কোনও ক্লিপিংয়ের বিষয়ে চিন্তা করতে হবে না:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

কেবল "নীচে" এবং "উচ্চতা" বৈশিষ্ট্যগুলি মিলিয়ে নিন এবং আপনার আরজিবিএ মানগুলি ছায়ার শীর্ষে / নীচে আপনি যা চান তা সেট করুন

Answer 13

আপনি এটির মতো এটি করতে পারেন:

সাধারণ বাক্য গঠন:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

উদাহরণ: আমরা কেবল লাল রঙের সাথে একটি নীচের বাক্সের ছায়া তৈরি করতে চাই,

সুতরাং এটি করার জন্য আমাদের সমস্ত পক্ষের বিকল্পগুলি সেট করতে হবে যেখানে নীচের বাক্সের ছায়া বিকল্পগুলি সেট করতে হবে এবং অন্যকে অনুসরণ হিসাবে খালি হিসাবে সেট করতে হবে:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

Answer 14

সাদা পরিবর্তে অন্য কারও কাছে তার উত্তর ট্রান্সপার্যান্ট দিকে আপডেট করুন যাতে এটি অন্যান্য রঙের পটভূমিতেও কাজ করে।

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

Answer 15

ভেতরের ছায়া

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>