回答:
番号:
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'プロパティから取得されます。
実際には、color
プロパティを変更しbox-shadow
、色なしで残す必要があります。
box-shadow: 1px 2px 3px;
color: #a00;
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>
以下のコメントで言及されているバグはそれ以降修正されました:)
color
プロパティを継承しないバグがあります。code.google.com/p/chromium/issues/detail?id=133745
color
して子要素に再適用する必要があります。
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/jjenzz/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;
Matt Robertsの答えはWebkitブラウザー(サファリ、クロームなど)には正しいですが、影を作るためのプログラムを学ぶように言われるのではなく、誰かが簡単な答えを求めているのではないかと思いました。