चारों तरफ बॉक्स-छाया कैसे लागू करें?

Question

मैं box-shadowसभी चार पक्षों पर लागू करने की कोशिश कर रहा हूं । मैं इसे केवल 2 पक्षों पर प्राप्त कर सकता हूं:

Comments

CSS3please.com इस तरह के सामान के लिए हमेशा मददगार होता है ...

— sscirrus

Answer 1

यह x और y ऑफसेट के कारण है। इसे इस्तेमाल करे:

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

संपादित करें (बाद में ..): टिप्पणी में अनुरोध के अनुसार उत्तर को और अधिक पार ब्राउज़र बनाया गया :)

btw: आजकल कई css3 जनरेटर हैं .. css3.me , css3maker , css3gatorator आदि ...

Comments

+1 क्योंकि आपको सही उत्तर तेज़ी से मिला, हालांकि यह छोटे दायरे और प्रसार मूल्य के साथ बेहतर दिखता है।

— २०:११

धन्यवाद। मैं आपके पहले उत्तर को देख रहा था और सोच रहा था, कि मुझे प्रश्न गलत मिला :)

— Damb

आपको अपना उत्तर अधिक क्रॉस-ब्राउज़र बनाना चाहिए।

— लुकास

मुझे यकीन नहीं है कि क्यों, लेकिन यह मेरे लिए काम नहीं करता है। इसका उपयोग करने पर मुझे कोई बॉक्स छाया नहीं मिलता है। अगर मैं @thirtydot द्वारा पोस्ट किए गए उत्तर का उपयोग करता हूं तो यह काम करता है। यदि आपके पास पहले दो मान हैं तो यह धब्बा और फैलाना होगा 0. क्रोम में यह हो रहा है।

— चार्ल्स विलियम्स

@thirtydot - आप सही हैं, एक हल्की पृष्ठभूमि के साथ, आप इसे देख सकते हैं। लेकिन अगर आपकी पृष्ठभूमि काली है, तो आप इसे बिल्कुल नहीं देख सकते हैं। इसलिए मुझे लगता है कि मुझे यह नहीं कहना चाहिए कि यह काम नहीं करता है। लेकिन यह निश्चित रूप से प्रसार के बिना दिखाई नहीं देता है जब आपके पास एक काली पृष्ठभूमि होती है, भले ही बॉक्स-छाया के रंग की परवाह किए बिना। लाल रंग के साथ भी यह प्रतीत होता है कि आपकी सीमा थोड़ी लाल है, लेकिन कोई "दृश्यमान" बॉक्स छाया नहीं है। इसलिए यदि आपके पास एक हल्की पृष्ठभूमि है, तो मुझे लगता है कि यह समाधान काम करेगा। बहुत गहरे रंग की पृष्ठभूमि के लिए, यह समाधान विश्वसनीय नहीं है। 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-shadow - विशेष रूप से, यह "प्रसार त्रिज्या" है।

— २०:२५ बजे

फिडेल निर्माता - एमवीपी।

— Terrance00

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: h-offset v-offset blur spread color;

एच-ऑफसेट: छाया की क्षैतिज ऑफसेट। एक सकारात्मक मान बॉक्स के दाईं ओर छाया डालता है, एक नकारात्मक मूल्य बॉक्स के बाईं ओर छाया डालता है - आवश्यक

वी-ऑफसेट: छाया की ऊर्ध्वाधर ऑफसेट। एक सकारात्मक मूल्य बॉक्स के नीचे छाया डालता है, एक नकारात्मक मूल्य बॉक्स के ऊपर छाया डालता है - आवश्यक

धुंधला: धुंधला त्रिज्या (संख्या जितनी अधिक होगी, छाया जितनी अधिक धुंधली होगी) - वैकल्पिक

रंग: छाया का रंग - वैकल्पिक

प्रसार: प्रसार त्रिज्या। एक सकारात्मक मूल्य छाया के आकार को बढ़ाता है, एक नकारात्मक मूल्य छाया के आकार को कम करता है - वैकल्पिक

इनसेट: बाहरी छाया से आंतरिक छाया तक परिवर्तन - वैकल्पिक

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 6

सबसे सरल उपाय और सबसे आसान तरीका है चारों तरफ छाया को जोड़ना। सीएसएस

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

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>

स्क्रीनशॉट

refs

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

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

Answer 9

सभी चार पक्षों के लिए इस सीएसएस कोड का उपयोग करें: बॉक्स-छाया: 0px 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);