「box-shadow-color」プロパティはありますか?


193

次のCSSがあります。

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

今、私はその色を抽出してページの色を「スキナブル」にしようとしています。これを行う方法はありますか?色を削除し、同じキーを後で使用すると、元のルールが上書きされます。

はないようですbox-shadow-color。少なくともGoogleは何も表示しません。


17
クエリの最初に "-"があるため、Googleは何も返しません:)
elon

回答:


129

番号:

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

6
それは変数の素晴らしい使い方です!今後数年以内にすべてのブラウザでサポートされることを願っています:/
fregante


1
... IEをサポートする必要がない限りunless
Cam Jackson

301

実は…あります!ちょっと。box-shadowcolorように、デフォルトborderはです。

http://dev.w3.org/.../#the-box-shadowによると

色は影の色です。色が存在しない場合、使用される色は 'color'プロパティから取得されます。

実際には、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>

以下のコメントで言及されているバグはそれ以降修正されました:)


3
CSSアニメーションのChrome 22(カナリア)には、ボックスシャドウがアニメーション化されたcolorプロパティを継承しないバグがあります。code.google.com/p/chromium/issues/detail?id=133745
デビッドマードック

14
要素にテキストが含まれていない場合は、ハックしてください。
フェニックス

10
そうですね、そうでなければ、それをラップcolorして子要素に再適用する必要があります。
fregante

3
IE10でも同じです。
MaxArt 2013年

4
賢明で適切な回答をありがとう。+10あなたに!
kumarharsh 2013

4

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/jje​​nzz/pen/EaAzo


2

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

-3

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ブラウザー(サファリ、クロームなど)には正しいですが、影を作るためのプログラムを学ぶように言われるのではなく、誰かが簡単な答えを求めているのではないかと思いました。



-8

多分これは新しいものです(私もcss3でかなりがらくたです)が、私はあなたが提案したものを正確に使用するページを持っています:

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

..そして、それは私にとってはうまくいきます(少なくともChromeでは)。


14
問題は、ボックスのシャドウの色だけを変更する方法でした。
ジュリアンD.
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.