চারদিকে বক্স-ছায়া কীভাবে প্রয়োগ করবেন?

Question

আমি box-shadowচারদিক থেকে একটি প্রয়োগ করার চেষ্টা করছি । আমি এটি কেবল দুটি পক্ষেই পেতে পারি:

Comments

CSS3please.com সর্বদা এই ধরণের স্টাফের জন্য সহায়ক ...

— সিসিরাস

Answer 1

এটি এক্স এবং ওয়াই অফসেটের কারণে। এটা চেষ্টা কর:

-webkit-box-shadow: 0 0 10px #fff;
        box-shadow: 0 0 10px #fff;

সম্পাদনা করুন (বছর পরে ..): মন্তব্যে অনুরোধ করা হয়েছে উত্তরটি আরও ক্রস ব্রাউজার তৈরি করেছে :)

BTW: অনেক CSS3 জেনারেটরের আজকাল হয় .. css3.me , css3maker , css3generator ইত্যাদি ...

Comments

+1 কারণ আপনি সঠিক উত্তরটি দ্রুত পেয়েছেন, যদিও এটি একটি ছোট ব্যাসার্ধ এবং একটি স্প্রেড মান সহ আরও ভাল দেখাচ্ছে।

— ত্রিশডট

ধন্যবাদ আমি আপনার প্রথম উত্তরের দিকে চেয়ে ছিলাম এবং ভেবেছিলাম যে আমি প্রশ্নটি ভুল পেয়েছি :)

— ডাম্ব

আপনার উত্তরটি আরও ক্রস ব্রাউজার করা উচিত।

— লুকাস

আমি নিশ্চিত না কেন, তবে এটি আমার পক্ষে কার্যকর হয় না। আমি এটি ব্যবহার করার সময় কোনও বাক্সের ছায়া পাই না। যদি আমি @ থার্টিডট পোস্ট করা উত্তরটি ব্যবহার করি তবে এটি কার্যকর হয়। প্রথম দুটি মান 0 হলে আপনার অস্পষ্টতা ছড়িয়ে দিতে হবে এবং ছড়িয়ে দিতে হবে এটি ক্রোমে ঘটছে is

— চার্লস উইলিয়ামস 17

@ থার্টিডট - হালকা ব্যাকগ্রাউন্ড সহ আপনি ঠিক বলেছেন, আপনি এটি দেখতে পারেন। তবে আপনার পটভূমিটি যদি কালো হয় তবে আপনি এটি একেবারেই দেখতে পারবেন না। সুতরাং আমি অনুমান করি যে এটি কাজ করে না আমার বলার উচিত নয়। বাক্স-ছায়ার রঙ নির্বিশেষে আপনার একটি কালো পটভূমি থাকাকালীন এটি স্পর্শ ছাড়াই দৃশ্যমান নয়। এমনকি লাল দিয়ে এটি প্রদর্শিত হয় আপনার সীমানা কিছুটা লালচে, তবে কোনও "দৃশ্যমান" বাক্সের ছায়া নেই। সুতরাং আপনার যদি হালকা ব্যাকগ্রাউন্ড থাকে তবে আমার ধারণা এই সমাধানটি কার্যকর হবে। খুব অন্ধকার পটভূমির জন্য, এই সমাধানটি নির্ভরযোগ্য নয়। jsfiddle.net/vkzd71rc বনাম jsfiddle.net/vkzd71rc/1

— চার্লস উইলিয়ামস

Answer 2

দেখুন: http://jsfiddle.net/thirtydot/cMNX2/8/

input {
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}

Comments

আমি জানি যে 3 মান + রঙের সাথে বাক্য ছায়ায় প্রতিটি মান কী। এই 4 মান মানে কি ??

— ড্রাগন ফ্লাই

পড়ুন: developer.mozilla.org/En/CSS/box- শ্যাডো - বিশেষত, এটি "স্প্রেড ব্যাসার্ধ" ius

— ত্রিশডট

ফিডল স্রষ্টা - এমভিপি।

— টেরেন্স 100

Answer 3

এটি দুর্দান্ত দেখাচ্ছে।

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

Answer 4

এই কোড হিসাবে কেবল সহজ:

box-shadow: 0px 0px 2px 2px black; /*any color you want*/

Answer 5

সবচেয়ে সহজ সমাধান এবং সহজ উপায় হ'ল চারদিকের জন্য ছায়া যুক্ত করা। সিএসএস

box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/

Answer 6

বাক্স-ছায়ার সিনট্যাক্স বুঝতে এবং সে অনুযায়ী এটি লিখুন

box-shadow: h-offset v-offset blur spread color;

এইচ-অফসেট: ছায়ার অনুভূমিক অফসেট। একটি ধনাত্মক মান বাক্সের ডানদিকে ছায়া রাখে, একটি নেতিবাচক মান বাক্সের বাম দিকে ছায়া রাখে - প্রয়োজনীয়

ভি-অফসেট: ছায়ার উল্লম্ব অফসেট। একটি ধনাত্মক মান ছায়াকে বাক্সের নীচে রাখে, একটি নেতিবাচক মান ছায়াকে বাক্সের উপরে রাখে - প্রয়োজনীয়

অস্পষ্টতা: অস্পষ্ট ব্যাসার্ধ (যত বেশি সংখ্যায় ছায়া ঝাপসা হবে) - ptionচ্ছিক

রঙ: ছায়ার রঙ - alচ্ছিক

স্প্রেড: ব্যাসার্ধ ছড়িয়ে দিন। একটি ধনাত্মক মান ছায়ার আকার বৃদ্ধি করে, একটি নেতিবাচক মান ছায়ার আকার হ্রাস করে .চ্ছিক al

ইনসেট: ছায়াকে বাইরের ছায়া থেকে অভ্যন্তরীণ ছায়ায় পরিবর্তন করে - ptionচ্ছিক

box-shadow: 0 0 10px #999;

বাক্স-ছায়া স্প্রেডের সাথে আরও ভাল কাজ করে

box-shadow: 0 0 10px 8px #999;

বাক্সের অভ্যন্তরে ছায়া প্রয়োগ করতে 'ইনসেট' ব্যবহার করুন

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

ছায়াকে আরও দক্ষতার সাথে সামঞ্জস্য করতে rgba (লাল সবুজ নীল আলফা) ব্যবহার করুন

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8); 

Answer 7

আমি http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a- block - with - css/ সাইট পেয়েছি ।

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Comments

এটি এই সাইটের অন্যান্য উত্তরগুলির মতো উপযুক্ত, তবে আপনি যেমন চেষ্টা চালিয়ে যাচ্ছেন, আমি আপনার উত্তরটি ভোটাভুটি করছি।

— ব্লুরেয়ার

Answer 8

CSS3 বক্স-ছায়া: 4 টি পক্ষের প্রতিসাম্য

1. একই রঙ সঙ্গে প্রতিটি পাশ

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}

<div class="four-sides-with-same-color"></div>

2. একেক রঙের সাথে প্রতিটি পাশ

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}

<div class="four-sides-with-different-color"></div>

স্ক্রিনশট

রেফারেন্স

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

Answer 9

চারটি পক্ষের জন্য এই সিএসএস কোডটি ব্যবহার করুন: বাক্স-ছায়া: 0 px 1px 7px 0px rgb (106, 111, 109);

Answer 10

আপনি নিম্নলিখিত লিঙ্কে বিভিন্ন সংমিশ্রণ করতে পারেন।
https://www.cssmatic.com/box-shadow

আপনার প্রয়োজনীয় ফলাফলগুলি নিম্নলিখিত সিএসএস দ্বারা অর্জন করা যেতে পারে

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);