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

StackOverflow https://stackoverflow.com/questions/3012899

  •  26-09-2019
  •  | 
  •  

質問

次の CSS があります。

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

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

ないようです box-shadow-color, 、少なくともGoogleは何も見つけません。

役に立ちましたか？

解決

ノーます：

http://www.w3.org/TR/ CSS3-背景/＃-ボックスシャドウの

あなたは計算されたスタイルのリストをチェックして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;

サポート

  • サファリ 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 プリプロセッサを使用してスキニングを行うこともできます。と サス これと同様のことができます。

_テーマ1.scss:

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

_テーマ2.scss:

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

スタイル.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

は、

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

クイックコピー/貼り付けるあなたは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;

マット・ロバーツの答えは、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の少なくとも）

..そして、それは私のために罰金を働きます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top