هل يوجد خاصية "بلون الصناديق"؟

Question

لدي CSS التالية:

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

الآن أحاول استخراج هذا اللون لجعل ألوان الصفحة "قابلة للنقح". هل هناك أي طريقة للقيام بذلك؟ ما عليك سوى إزالة اللون ، ثم استخدام نفس المفتاح مرة أخرى في الكتابة فوق القاعدة الأصلية.

لا يبدو أن هناك box-shadow-color, ، على الأقل Google لا ترفع أي شيء.

Answer 1

لا:

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

يمكنك التحقق من ذلك في Chrome و Firefox عن طريق التحقق من قائمة الأنماط المحسوبة. الخصائص الأخرى التي لها طرق مختصرة (مثل border-radius) لديهم الاختلافات المحددة في المواصفات.

كما هو الحال مع معظم خصائص CSS "ذات اليد الطويلة" ، متغيرات CSS يمكن حل هذه المشكلة:

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

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

Answer 2

في الواقع ... هناك! نوعا ما. box-shadow الإعدادات الافتراضية ل color, ، تماما مثل border يفعل.

بالنسبة الى http://dev.w3.org/.../#the-box-shadow

اللون هو لون الظل. إذا كان اللون غائبًا ، يتم أخذ اللون المستخدم من خاصية "اللون".

في الممارسة العملية ، عليك تغيير color الممتلكات والمغادرة box-shadow بدون لون:

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

يدعم

• Safari 6+
• Chrome 20+ (على الأقل)
• Firefox 13+ (على الأقل)
• IE9+ (IE8 لا يدعم 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>

تم إصلاح الخطأ المذكور في التعليق أدناه منذ ذلك الحين :)

Answer 3

يمكنك استخدام المعالج المسبق CSS للقيام ببلاغتك. مع ساس يمكنك أن تفعل شيئًا مشابهًا لهذا:

_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

Answer 4

يمكنك القيام بذلك مع متغير CSS

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

Answer 5

ستكون نسخة سريعة ونسخة/لصق يمكنك استخدامها في Chrome و Firefox: (قم بتغيير الأشياء بعد # لتغيير اللون)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

إجابة Matt Roberts صحيحة بالنسبة لمتصفحات WebKit (Safari ، Chrome ، إلخ) ، لكنني اعتقدت أن هناك شخصًا ما قد يرغب في إجابة سريعة بدلاً من أن يُطلب منهم تعلم البرمجة لصنع بعض الظلال.

Answer 6

نعم، ثمة طريق

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

Answer 7

ربما يكون هذا جديدًا (أنا أيضًا حماقة جميلة في CSS3) ، لكن لدي صفحة تستخدم بالضبط ما تقترحه:

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

.. وهو يعمل بشكل جيد بالنسبة لي (بالكروم على الأقل).