'Kutu-gölge-renk' özelliği var mı?

Aşağıdaki CSS var:

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

Şimdi sayfa renklerini 'kaplanabilir' yapmak için bu rengi çıkarmaya çalışıyorum. Bunu yapmanın bir yolu var mı? Sadece rengi kaldırmak ve daha sonra aynı anahtarı tekrar kullanmak orijinal kuralın üzerine yazar.

box-shadow-colorGörünüşe göre, en azından Google hiçbir şey açmıyor .

Hayır:

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

Hesaplanan stiller listesini kontrol ederek Chrome ve Firefox'ta bunu doğrulayabilirsiniz. Steno metodları (gibi border-radius) olan diğer özelliklerin spesifikasyonlarında tanımlanmış varyasyonları vardır.

Çoğu "uzun el" CSS özelliklerinde olduğu gibi, CSS değişkenleri de bu sorunu çözebilir:

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

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

Aslında… var! Bir çeşit. box-shadowvarsayılan color, tıpkı olduğu gibi border.

Göre http://dev.w3.org/.../#the-box-shadow

Renk gölgenin rengidir. Renk yoksa, kullanılan renk 'renk' özelliğinden alınır.

Uygulamada, colormülkü değiştirmeniz ve box-shadowbir renksiz bırakmanız gerekir :

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

Destek

• Safari 6+
• Chrome 20+ (en az)
• Firefox 13+ (en azından)
• IE9 + (IE8 hiç desteklemez box-shadow)

gösteri

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>

Aşağıdaki yorumda belirtilen hata düzeltildi :)

Kaplama yapmak için bir CSS ön işlemcisi kullanabilirsiniz. Sass ile buna benzer bir şey yapabilirsiniz:

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

Site genelinde tema değil, sınıf temelli tema ihtiyacınız varsa, bunu yapabilirsiniz: http://codepen.io/jjenzz/pen/EaAzo

Bunu CSS Değişkeni ile yapabilirsiniz

.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 ve Firefox için kullanabileceğiniz hızlı ve kopyala / yapıştır: (# işaretinden sonra rengi değiştirmek için)

-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'ın cevabı webkit tarayıcıları (safari, krom, vb.) İçin doğrudur, ancak orada birisinin bazı gölgeler yapmak için programlamayı öğrenmekten ziyade hızlı bir cevap isteyebileceğini düşündüm.

Evet bir yolu var

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

Belki bu yeni (ben de css3 de oldukça saçmalık), ama tam olarak ne önerdiğini kullanan bir sayfa var:

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

.. ve benim için iyi çalışıyor (en azından Chrome'da).