blocks|key|1011966|text|否：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1011967|http://www.w3.org/TR/css3-background/#the-box-shadow|offset|length|1011968|您可以在Chrome和Firefox中通过检查计算出的样式列表来验证这一点。具有速记方法的其他属性(如border-radius)在规范中定义了它们的变体。|style|CODE|1011969|与大多数缺少的“长手”CSS属性一样，CSS+variables可以解决这个问题：|1011970|#el+{
++++--box-shadow-color:+palegoldenrod;
++++box-shadow:+1px+2px+3px+var(--box-shadow-color);
}

#el:hover+{
++++--box-shadow-color:+goldenrod;
}|code-block|syntax|javascript|1011971|entityMap|0|LINK|mutability|MUTABLE|url|1|http://dev.w3.org/csswg/css3-background/#the-border-radius|2|https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables^0|0|0|1G|0|0|1F|D|1F|D|1|0|J|D|2|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@$D|17|E|18|H|I]]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|L|3|M|5|N|7|1G|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]|X|$5|T|U|V|A|$W|Y]]|Z|$5|T|U|V|A|$W|10]]]]

No:

<a href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="noreferrer">http://www.w3.org/TR/css3-background/#the-box-shadow</a>

You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like <a href="http://dev.w3.org/csswg/css3-background/#the-border-radius" rel="noreferrer"><code>border-radius</code></a>) have their variations defined in the spec.

As with most missing "long-hand" CSS properties, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" rel="noreferrer">CSS variables</a> can solve this problem:

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

#el:hover {
 --box-shadow-color: goldenrod;
}
</code></pre>

blocks|key|1226654|text|你可以在Chrome和Firefox上使用的一种快速复制/粘贴方法是：(更改#后的内容以更改颜色)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226655|-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;|code-block|syntax|javascript|1226656|Matt+Roberts的答案对于webkit浏览器(safari、chrome等)来说是正确的，但我想有人可能想要一个快速的答案，而不是被告知要学习编程来制作一些阴影。|1226657|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color) 

<pre><code>-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;
</code></pre>

Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.

blocks|key|1012098|text|您可以使用CSS预处理器来进行皮肤处理。使用Sass，您可以执行类似以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1012099|_theme1.scss：|1012100|$theme-primary-color:+#a00;
$theme-secondary-color:+#d00;
//+etc.|code-block|syntax|javascript|1012101|_theme2.scss：|1012102|$theme-primary-color:+#666;
$theme-secondary-color:+#ccc;
//+etc.|1012103|styles.scss：|1012104|//+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;|1012105|如果不是站点范围的主题，而是您需要的基于类的主题，那么您可以这样做：http://codepen.io/jjenzz/pen/EaAzo|1012106|entityMap|0|LINK|mutability|MUTABLE|url|http://sass-lang.com/|1|http://codepen.io/jjenzz/pen/EaAzo^0|M|4|0|0|0|0|0|0|0|0|Y|Y|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1B|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

You could use a CSS pre-processor to do your skinning. With <a href="http://sass-lang.com/" rel="noreferrer">Sass</a> you can do something similar to this:

_theme1.scss:

<pre><code>$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
</code></pre>

_theme2.scss:

<pre><code>$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
</code></pre>

styles.scss:

<pre><code>// 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;
</code></pre>

If it's not site wide theming but class based theming you need, then you can do this: <a href="http://codepen.io/jjenzz/pen/EaAzo" rel="noreferrer">http://codepen.io/jjenzz/pen/EaAzo</a>

I have the following CSS:

<pre><code>box-shadow: inset 0px 0px 2px #a00;
</code></pre>

Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.

There doesn't seem to be a <code>box-shadow-color</code>, at least Google turns nothing up.

Is there a 'box-shadow-color' property?

我有以下CSS：box-shadow: inset 0px 0px 2px #a00;现在，我正在尝试提取该颜色以使页面颜色“可换皮”。有什么方法可以做到这一点吗？只需删除颜色，然后稍后再次使用相同的键就会覆盖原始规则。似乎没有box-shadow-color，至少谷歌什么也没找到。

问有“box-shadow-color”属性吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有“box-shadow-color”属性吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有“box-shadow-color”属性吗？
EN