มีคุณสมบัติ 'กล่องเงาสี' หรือไม่?

ฉันมี CSS ต่อไปนี้:

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

ตอนนี้ฉันกำลังพยายามแยกสีนั้นออกเพื่อทำให้สีของหน้า 'skinnable' มีวิธีการทำเช่นนี้หรือไม่? เพียงแค่เอาสีออกแล้วใช้ปุ่มเดิมอีกครั้งในภายหลังเขียนทับกฎเดิม

ดูเหมือนจะไม่เป็นbox-shadow-colorอย่างน้อย Google ก็ไม่ทำอะไรเลย

No:

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;
}

จริงๆแล้ว…มี! เรียงจาก 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>

ข้อผิดพลาดที่กล่าวถึงในความคิดเห็นด้านล่างนั้นได้รับการแก้ไขแล้ว :)

คุณสามารถใช้ตัวประมวลผลล่วงหน้า CSS เพื่อสร้างสกินของคุณ ด้วย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

คุณสามารถทำได้ด้วยCSS Variable

.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 */
}

วิธีที่รวดเร็วและคัดลอก / วางที่คุณสามารถใช้สำหรับ 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 (ซาฟารีโครเมี่ยม ฯลฯ ) แต่ฉันคิดว่ามีใครบางคนในนั้นอาจต้องการคำตอบอย่างรวดเร็วแทนที่จะบอกให้เรียนรู้ที่จะเขียนโปรแกรมเพื่อสร้างเงา

ใช่มีวิธี

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

อาจจะเป็นเรื่องใหม่ (ฉันยังอึสวยที่ css3) แต่ฉันมีหน้าเว็บที่ใช้สิ่งที่คุณแนะนำ:

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

.. และมันใช้งานได้ดีสำหรับฉัน (ใน Chrome อย่างน้อย)