230

私は次のCSSを持っています：

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

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

ないようですbox-shadow-color、少なくともグーグルは何も上げません。

4

5 に答える 5

340

実は…あります！ある種。box-shadowデフォルトはcolor、と同じborderです。

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

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

実際には、プロパティを変更し、色なしcolorで残す必要があります。box-shadow

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

サポート

  • Safari6以降
  • 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>

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

于 2012-06-12T01:53:28.493 に答える
162

いいえ：

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;
}
于 2010-06-10T09:01:09.553 に答える
5

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

于 2013-09-03T13:38:00.763 に答える
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 */
}
于 2019-02-07T12:28:43.833 に答える
-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など）には正しいですが、シャドウを作成するためのプログラムを学ぶように言われるのではなく、誰かが簡単な答えを求めているのではないかと思いました。

于 2012-04-24T11:54:02.973 に答える