css - क्या कोई 'बॉक्स-छाया-रंग' संपत्ति है?




css3 box-shadow (4)

असल में ... वहाँ है! की तरह। box-shadow color लिए डिफ़ॉल्ट, border तरह ही करता है।

http://dev.w3.org/.../#the-box-shadow अनुसार

रंग छाया का रंग है। यदि रंग अनुपस्थित है, तो इस्तेमाल किया रंग 'रंग' संपत्ति से लिया जाता है।

अभ्यास में, आपको color संपत्ति को बदलना होगा और color बिना box-shadow छोड़ना होगा:

box-shadow: 1px 2px 3px;
color: #a00;

समर्थन

  • सफारी 6+
  • क्रोम 20+ (कम से कम)
  • फ़ायरफ़ॉक्स 13+ (कम से कम)
  • आईई 9 + (आईई 8 बिल्कुल box-shadow समर्थन नहीं करता है)

डेमो

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>

नीचे दी गई टिप्पणी में उल्लिखित बग को ठीक कर दिया गया है :)

मेरे पास निम्न सीएसएस है:

box-shadow: inset 0px 0px 2px #a00;

अब मैं पेज रंग 'स्किनेबल' बनाने के लिए उस रंग को निकालने की कोशिश कर रहा हूं। ऐसा करने का कोई रास्ता नहीं है? बस रंग को हटा दें, और फिर उसी कुंजी का उपयोग करके बाद में मूल नियम को ओवरराइट कर दें।

एक box-shadow-color प्रतीत नहीं होता है, कम से कम Google कुछ भी नहीं बदलता है।


आप अपनी स्किनिंग करने के लिए एक सीएसएस प्री-प्रोसेसर का उपयोग कर सकते हैं। Sass साथ आप ऐसा कुछ कर सकते हैं:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

यदि यह साइट व्यापक थीमिंग नहीं है लेकिन क्लास आधारित थीमिंग की आपको आवश्यकता है, तो आप यह कर सकते हैं: http://codepen.io/jjenzz/pen/EaAzo


नहीं:

http://www.w3.org/TR/css3-background/#the-box-shadow

आप गणना की गई शैलियों की सूची जांचकर क्रोम और फ़ायरफ़ॉक्स में इसे सत्यापित कर सकते हैं। अन्य गुण जिनके पास शॉर्टंड विधियां हैं (जैसे border-radius ) में उनकी विविधताएं spec में परिभाषित हैं।

अधिकांश लापता "लंबे हाथ" सीएसएस गुणों के साथ, सीएसएस चर इस समस्या को हल कर सकते हैं:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

आप फ़ायरफ़ॉक्स 31+ में इसे आज़मा सकते हैं। दुर्भाग्यवश, लेखन के समय, किसी अन्य ब्राउज़र के पास एक कार्यान्वयन कार्य नहीं है।


शायद यह नया है (मैं सीएसएस 3 पर भी बहुत बकवास हूं), लेकिन मेरे पास एक ऐसा पृष्ठ है जो आपके द्वारा सुझाए गए सुझावों का उपयोग करता है:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. और यह मेरे लिए ठीक काम करता है (कम से कम क्रोम में)।





box-shadow