সিএসএসে পিএনজি চিত্রের জন্য ছায়া ছাড়ুন

210

আমার একটি পিএনজি চিত্র রয়েছে, এতে ফর্ম ফর্ম (স্কোয়ারবিহীন) রয়েছে।

আমাকে এই চিত্রটিতে ড্রপ-শ্যাডো এফেক্ট প্রয়োগ করতে হবে।

স্ট্যান্ডার্ড পদ্ধতির ...

-o-box-shadow:      12px 12px 29px #555;
-icab-box-shadow:   12px 12px 29px #555;
-khtml-box-shadow:  12px 12px 29px #555;
-moz-box-shadow:    12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow:         12px 12px 29px #555;

... এই চিত্রটির জন্য ছায়াগুলি প্রদর্শন করে যেমন এটি একটি বর্গক্ষেত্র। সুতরাং, আমি আমার চিত্র এবং বর্গাকার ছায়া দেখতে পাচ্ছি যা চিত্রটিতে প্রদর্শিত অবজেক্টের রূপ অনুসরণ করে না।

এটি সঠিকভাবে করার কোনও উপায় আছে কি?

css  image  png  transparency 
— AntonAL
সূত্র

উত্তর:

261

পার্টিতে কিছুটা দেরী, তবে হ্যাঁ, ড্রপস্যাডো-ফিল্টার (ওয়েবকিটের জন্য), এসভিজি (ফায়ারফক্সের জন্য) এবং আইএক্সের জন্য ডিএক্স ফিল্টার সংমিশ্রণ করে আলফা মাস্কড পিএনজির আশেপাশে "সত্য" গতিশীল ড্রপ ছায়া তৈরি করা সম্পূর্ণভাবে সম্ভব।

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
<!-- HTML elements here -->

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

সত্য ড্রপ-শ্যাডো এবং বাক্স-ছায়া এবং আমি যে কৌশলটি স্রেফ বর্ণনা করেছি তার মধ্যে কিছু তুলনা Some ।

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

— ডুডলি স্টোরি
সূত্র
1
পার্টিতে আরও বেশি দেরি করা হয়েছে, তবে ক্রস-প্ল্যাটফর্ম সিএসএস filterসম্পত্তিটির জন্য +1 ... যদিও, আমি মনে করি না যে এইচটিএমএল এসভিজি ট্যাগগুলির প্রয়োজন হবে, আলফা চ্যানেল সহ কোনও পিএনজি এই কৌশলটি করবে
— গিলাইলে
2
ডুডলি স্টোরি ঠিক আছে। এসভিজি ব্যতীত ফায়ারফক্সে ছায়া উপস্থিত হয় না। @ অ্যান্টোনাল এই উত্তরটি গ্রহণ করতে পারে।
— জাভসমো
5
ডিএক্স ফিল্টারগুলি এখন আইই তে কাজ করে না ... আইই এর জন্য কোনও নতুন সমাধান আছে কি? msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
— tb11
2
আজকাল ফায়ারফক্স সমর্থন করে filter: drop-shadow(x y blur color); যাতে এসভিজি ট্রিকের আর প্রয়োজন হয় না।
— Raptor007
11
আমরা সকলেই কি একমত হতে পারি না যে, বহু বছর আগে আইইয়ের আবর্জনার স্তূপে ফেলে দেওয়া উচিত ছিল? এজ কিছুটা ভাল, তবে পবিত্র গাভী এম you আপনি কী ইচ্ছাকৃতভাবে সফ্টওয়্যার বিকাশকে আইই দিয়ে অন্ধকার যুগে ফিরিয়ে দিয়েছেন? কি ঘৃণা।
— RyanNerd
216

হ্যাঁ, এটি filter: dropShadow(x y blur? spread? color?)সিএসএস বা ইনলাইন দ্বারা ব্যবহার করা সম্ভব :

img {
  width: 150px;
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">

<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">
স্নিপেট প্রসারিত করুন

— আব্দুল
সূত্র
8
কোনও আইই সমর্থন নেই ... :(
— সিএফ
10
আই.ই. এর সময়কালে পাওয়া উচিত: পি
— ব্রায়ান্ট জ্যাকসন
6
-webkit- ফিল্টার আর প্রয়োজন হয় না
— ব্রেট ডোনাল্ড
11
2019: আইই কি? : পি
— অশুভরিকো
36

আপনার যদি> ১০০ টি চিত্রের জন্য ড্রপ ছায়া থাকতে চান তবে আমি কমান্ড-লাইন প্রোগ্রাম ইমেজম্যাগিকটি ব্যবহার করার পরামর্শ দেব । এটির সাহায্যে আপনি কেবল একটি কমান্ড টাইপ করে 100 টি চিত্রের আকারের ড্রপ ছায়া প্রয়োগ করতে পারেন! উদাহরণ স্বরূপ:

for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done

উপরের (শেল) কমান্ডটি বর্তমান ডিরেক্টরিতে প্রতিটি .png ফাইল নেয়, একটি ড্রপ ছায়া প্রয়োগ করে এবং ছায়া / ডিরেক্টরিতে ফলাফল সংরক্ষণ করে। যদি আপনি উত্পন্ন ড্রপ ছায়া পছন্দ না করেন তবে আপনি প্যারামিটারগুলিকে প্রচুর টুইট করতে পারেন; ছায়ার জন্য ডকুমেন্টেশন দেখে শুরু করুন , এবং সাধারণ ব্যবহারের নির্দেশাবলীতে চিত্রগুলিতে করা যেতে পারে এমন অনেকগুলি দুর্দান্ত উদাহরণ রয়েছে।

আপনি যদি ড্রপ ছায়ার চেহারা সম্পর্কে ভবিষ্যতে আপনার মন পরিবর্তন করেন - বিভিন্ন পরামিতি সহ নতুন চিত্র উত্পন্ন করার জন্য এটি কেবলমাত্র একটি আদেশ :-)

— psmears
সূত্র
22
যদিও এটি একটি সমাধান, প্রশ্নের উত্তর দেয় না!
— লিও
6
প্রশ্নকারী ব্রাউজারটি ছায়া সরবরাহ করার চেষ্টা করছে, সার্ভারে স্ক্রিপ্টগুলি কার্যকর করতে পারে না যা ছায়া তৈরি করতে পারে। এটি দরকারী তথ্য তবে একই সমস্যার জায়গা নয়।
— এসজি 1
এটি কাজ করতে কয়েকটি নোট: ১. এই কমান্ডটি চালানোর আগে আপনাকে ছায়া ডিরেক্টরি তৈরি করতে হবে (যেমন সহ mkdir shadow) ২. $iউদ্ধৃত করা উচিত (যেমন হিসাবে "$i") বা যদি কোনও চিত্রের ফাইলনামে কোনও স্থান থাকে তবে এটি শ্বাসরোধ করবে:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done
— অ্যান্ড্রু মাচারেট
2
৩. ফলস্বরূপ ফাইলগুলির নাম দেওয়া হবে filename.png.png। এখানে একটি সম্পূর্ণরূপে for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
— চলমান
@ অ্যান্ড্রুম্যাকেরেট: ভাল পয়েন্ট - যদিও নোট করুন এটি সম্পূর্ণরূপে কর্মক্ষম প্রোগ্রামের পরিবর্তে কী করা যায় তার একটি চিত্রণ হিসাবে বোঝানো হয়েছে! আমি ডাবল .png প্রত্যয় এবং উদ্ধৃতি স্থির করেছি; যে ডিরেক্টরি জিনিসটি আমি অনুভব করি সেগুলি কেবল
— পথেই আসবে
34 
img {
  -webkit-filter: drop-shadow(5px 5px 5px #222222);
  filter: drop-shadow(5px 5px 5px #222222);
}

এটা আমার জন্য দুর্দান্ত কাজ করেছে আই.ই. তে একটি বিষয় লক্ষণীয় আপনার পূর্ণ রঙ প্রয়োজন (# 222222) তিনটি অক্ষর কাজ করে না।

— জ্যাকলিন ইউ
সূত্র
29

যেমন ডুডলি তার উত্তরে উল্লেখ করেছেন করেছেন যে ওয়েবকিটের জন্য ড্রপ-শ্যাডো সিএসএস ফিল্টার, ফায়ারফক্সের জন্য এসভিজি এবং ইন্টারনেট এক্সপ্লোরার 9- এর জন্য ডাইরেক্টএক্স ফিল্টার দিয়ে এটি সম্ভব।

আরও এক ধাপ হ'ল অতিরিক্ত অনুরোধটি সরিয়ে এসভিজিকে ইনলাইন করা:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.5)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}
— কার্ল হর্কি
সূত্র
1
এটি ভালভাবে কাজ করে .. যদি আমি এইচটিএমএল ট্যাগের মধ্যে এসভিজি সংজ্ঞায়িত করি তবে তার চেয়ে ভাল। (ফায়ারফক্স)
— ওকি এরি রিনালাদি
18

আপনার শ্রেণিতে ব্যাসার্ধের সাথে সীমানা যুক্ত করুন যদি এটি একটি ব্লক হয়। কারণ ডিফল্টরূপে ছায়াটি ব্লক সীমানায় প্রযোজ্য হবে, এমনকি আপনার চিত্রটি গোলাকার রয়েছে।

border-radius: 4px;

আপনার চিত্রের কোণ অনুসারে এর সীমানা ব্যাসার্ধ পরিবর্তন করুন। এই সাহায্য আশা করি।

— anupal
সূত্র
12

কেবল এটি যুক্ত করুন:

-webkit-filter: drop-shadow(5px 5px 5px #fff);
 filter: drop-shadow(5px 5px 5px #fff);

উদাহরণ:

<img class="home-tab-item-img" src="img/search.png"> 

.home-tab-item-img{
    -webkit-filter: drop-shadow(5px 5px 5px #fff);
     filter: drop-shadow(5px 5px 5px #fff); 
}
— মাহমুদ জাল্ট
সূত্র
3

আমি যখন এটি পোস্ট করেছি মূলত এটি সম্ভব ছিল না তাই এটিই কার্যতালিকা। এখন আমি সহজভাবে অন্যান্য উত্তর ব্যবহার করার পরামর্শ দিই।

চিত্রটির বাহ্যরেখা পাওয়ার কোনও উপায় নেই তবে আপনি এটি কেন্দ্রে চিত্রের পিছনে একটি ডিভ দিয়ে নকল করতে পারেন।

যদি আমার কৌশলটি কাজ না করে তবে আপনাকে চিত্রটি কাটাতে হবে এবং প্রতিটি ছোট্ট চিত্রের জন্য এটি করতে হবে। (যত বেশি চিত্রের ছায়া আরও নিখুঁত দেখাবে) তবে বেশিরভাগ চিত্রের জন্য এটি কেবলমাত্র একটি আইএমজি দিয়ে ঠিক দেখাচ্ছে।

আপনার যা করা দরকার তা হ'ল আপনার ইমগের মতো একটি মোড়ক ডিভি রাখা

<div id="imgWrap">
    <img id="img" scr="imgLocation">
</div>

তারপরে আপনি মোড়কের ভিতরে একটি খালি বিভাজক রাখুন (এটি ছায়া হিসাবে পরিবেশন করবে)

<div id="imgWrap">
    <div id="shadow"> </div>
    <img id="img" scr="imgLocation">
</div>

এবং তারপরে আপনাকে সিএসএসের সাহায্যে ছায়াকে ইমগের পিছনে উপস্থিত করতে হবে:

#img {
    z-index: 1;
}

#shadow {
    z-index: 0; /*make this value negative if doesnt work*/
    box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
    width: 0;
    height: 0;
}

আসল ইমগের অবস্থানের জন্য এখন ইমগ্রেপটি অবস্থান করুন ... ইমগের ছায়াকে কেন্দ্র করে আপনি বাক্স-ছায়ার প্রথম দুটি মানকে ঘৃণিত করতে পারেন যাতে এগুলি নেতিবাচক হয় .... বা আপনি ইমজি এবং ছায়া ডিভগুলি একেবারে অবস্থান করতে পারেন img শীর্ষ এবং বাম মানগুলি তৈরি করে = 0 এবং ছায়া ডিভ মানগুলি = যথাক্রমে img প্রস্থ এবং উচ্চতা।

এটি যদি ভয়াবহ লাগে তবে আপনার আইএমজি কেটে আবার চেষ্টা করুন।

(আপনি যদি কেবল রূপরেখার img এর পেছনের ছায়াটি না চান তবে আপনার নিজের img অস্বচ্ছ করতে হবে এবং এটিকে এমনভাবে সম্পাদন করা দরকার যা স্বচ্ছ ছিল যা খুব শক্ত নয় এবং আপনি মন্তব্য করতে পারেন এবং আমি পরে ব্যাখ্যা করব)

— Xitcod13
সূত্র
আমি যখন উত্তর দিয়েছি এটা সম্ভব হয়নি আমি এখন অনুমান করি। ভবিষ্যত এখানে!
— Xitcod13
2

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

.image-shadow {
  filter: blur(10px) brightness(-100);
  -webkit-filter: blur(10px) brightness(-100);
  opacity: .5;
}

এর মধ্যে নীচের চিত্রটি অন্ধকার করার জন্য ব্রাইটনেস ফিল্টার এবং ধোঁয়াটে প্রভাবটি ড্রপ শেডায় সাধারণত কাস্ট করার জন্য একটি অস্পষ্ট ফিল্টার অন্তর্ভুক্ত রয়েছে। 50% এ অস্বচ্ছতা এটিকে নরম করার জন্য প্রয়োগ করা হয়।

এটি ক্রস ব্রাউজার ব্যবহার করে mozএবং msপতাকা প্রয়োগ করা যেতে পারে ।

উদাহরণ: https://jsfiddle.net/5mLssm7o/

— আমি করি
সূত্র
1

এখানে প্রস্তাবিত বৈশিষ্ট্য রয়েছে যা আপনি নির্বিচারে আকারের ড্রপ ছায়ার জন্য ব্যবহার করতে পারেন। আপনি এটি এখানে দেখতে পাচ্ছেন, লিয়া ভেরোর সৌজন্যে:

http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom

যদিও ব্রাউজার সমর্থন ন্যূনতম।

— avramov
সূত্র
1

CSS এর মাধ্যমে এটি সম্ভব হবে না - একটি চিত্র একটি বর্গক্ষেত্র, এবং তাই ছায়াটি একটি বর্গক্ষেত্রের ছায়া হবে। সবচেয়ে সহজ উপায় হল ফটোশপ / গিম্প বা অন্য কোনও চিত্র সম্পাদককে কোর আঁকার মতো ছায়া প্রয়োগ করা।

— oezi
সূত্র
উত্তর দেওয়ার জন্য ধন্যবাদ. তবে, সম্পাদকটিতে চিত্র যুক্ত করার ক্ষেত্রে ভবিষ্যতে সমস্যা হবে, যখন আমার> 100 টি চিত্র থাকবে এবং ছায়াগুলিকে কিছুটা ঝলকানো উচিত। টি তিনি আমার সমস্যার সর্বোত্তম সমাধান - হ'ল jQuery নিয়ে প্রতিটি চিত্রের নীচে অতিরিক্ত ছায়া চিত্র যুক্ত করুন।
— আন্তোনাল
1

যখন আমার কেবল "সামান্য" ছায়া প্রয়োজন তখন এটি ব্যবহার করুন (পড়ুন: কনট্যুরটি অবশ্যই উচ্চ-নির্ভুল হওয়া উচিত নয়) একটি ডিজিটাল রেডিয়াল ফিল দিয়ে 100%-ব্ল্যাক-টু-100%-ট্রান্সপারেন্টের সাথে একটি ডিআইভি স্থাপন করছে। ডিআইভির জন্য সিএসএস দেখতে এমন কিছু দেখাচ্ছে:

.shadow320x320{    
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  }

এটি একটি 320x320 ডিআইভিতে একটি বিজ্ঞপ্তি কালো বিবর্ণ-আউট 'ডট' তৈরি করবে। আপনি যদি ডিআইভির উচ্চতা বা প্রস্থের স্কেল করেন তবে আপনি একটি অনুরূপ ডিম্বাকৃতি পাবেন। বোতল বা অন্যান্য সিলিন্ডারের মতো আকারের নীচে ছায়াগুলি তৈরি করতে খুব সুন্দর।

সিএসএস গ্রেডিয়েন্টগুলি তৈরি করতে এখানে একটি নিখুঁত অবিশ্বাস্য, অতি-দুর্দান্ত সরঞ্জাম রয়েছে:

http://www.colorzilla.com/gradient-editor/

PS: আপনি যখন এটি ব্যবহার করেন সৌজন্য বিজ্ঞাপন ক্লিক করুন। (এবং, না, আমি এটির সাথে যুক্ত নই But তবে সৌজন্যে ক্লিক করা কিছুটা অভ্যাসে পরিণত হওয়া উচিত, বিশেষত আপনি যে সরঞ্জামটি প্রায়শই ব্যবহার করেন ... কেবলমাত্র বলা যায় ... যেহেতু আমরা সবাই নেট এ কাজ করছি ... )

— মুক্তি আইক্লিয়াস
সূত্র
আমি কিছুটা সংশোধন করার সময় এই দেখতে দেখতে বেশ সুন্দর দেখতে
— পেলাম
1
"সৌজন্য বিজ্ঞাপন ক্লিক"? সিরিয়াসলি, কীভাবে বিজ্ঞাপনদাতাদের ছাঁটাই করা 'নেট'র পক্ষে ভাল জিনিস? আমাদের মধ্যে অনেকেই নিজেকে বিজ্ঞাপনদাতা, বা তাদের দ্বারা অর্থ প্রদান করা হয়, সুতরাং যে পণ্যগুলি আপনি কখনই কিনতে যাবেন না এমন বিজ্ঞাপনগুলির জন্য বিজ্ঞাপনদাতাদের জন্য ট্রিগার চার্জ করা সত্যিই অপ্রীতিকর কাজ। আপনি যদি কোনও বিজ্ঞাপনে আগ্রহী হন তবে তা সর্বদাই ক্লিক করুন, তবে এটি করবেন না!
— অ্যালিস্টায়ার
ওহ, আপনার নৈতিক উঁচু স্থল থেকে নামুন, অ্যালাস্টার। বাস্তব-দুনিয়াকে কিছুটা আলাদা দেখাচ্ছে looks "বিজ্ঞাপনদাতাদের চুরি করা"? সত্যি? LOL - আমাকে একটি বিরতি দিন, মানুষ। আমি প্রায় 30 বছর ধরে বিজ্ঞাপন এবং বিপণনে আসছি। বিজোড় সৌজন্যতার জন্য ক্লিক করা আপনার বিনামূল্যে জন্য ব্যবহার করা সাইটগুলিকে সমর্থন করা ব্যতীত অন্য কোনও প্রভাব ফেলবে না। আপনি যদি পুরস্কার ইত্যাদির মুদ্রাস্ফীতি ইত্যাদি সম্পর্কে উদ্বিগ্ন হন, পুরো শিল্প জুড়ে ক্রমবর্ধমান একতরফা প্রবণতা সম্পর্কে চিন্তিত। বিজ্ঞাপনের পুরষ্কারগুলিকে বিকৃত করছে এটাই , অদ্ভুত সৌজন্য ক্লিকটি নয়।
— আইকুলাস
এফএফ এবং
— আইইতে
1

আপনি সমস্ত ব্রাউজারে নির্ভরযোগ্যভাবে এটি করতে পারবেন না। মাইক্রোসফ্ট আইই 10 + হিসাবে ডিএক্স ফিল্টারগুলিকে আর সমর্থন করে না, সুতরাং এখানে সমাধানগুলির কোনওটিই পুরোপুরি কাজ করে না:

https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx

সমস্ত ব্রাউজার জুড়ে নির্ভরযোগ্যভাবে কাজ করে এমন একমাত্র সম্পত্তি box-shadowএবং এটি কেবল আপনার উপাদানটির (যেমন একটি ডিভ) সীমানা রাখে, ফলস্বরূপ বর্গাকার সীমানা:

বাক্স-ছায়া: অনুভূমিক অফসেট উল্লম্বঅফসেট অস্পষ্টতা দূরত্ব স্প্রেডড্রেস কালার ইনসেট;

যেমন

box-shadow: -2px 6px 12px 6px #CCCED0;

আপনার যদি এমন কোনও চিত্র পাওয়া যায় যা 'বর্গক্ষেত্র' তবে সমান বৃত্তাকার কোণগুলির সাথে থাকে তবে ড্রপ ছায়াটি কাজ করে border-radius, তাই আপনি সর্বদা আপনার বিভাগে আপনার চিত্রের বৃত্তাকার কোণগুলি অনুকরণ করতে পারেন।

মাইক্রোসফ্ট ডকুমেন্টেশন এর জন্য এখানে box-shadow:

https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx

— ক্রিস হ্যালক্রো
সূত্র
আমি সরাসরি-উত্তর উত্তর প্রশংসা করি। উপরের উদাহরণগুলির মধ্যে কোনওটিই আমার পক্ষে কাজ করে না।
— ব্যারিপিকারটি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.