改变现有CSS影子的方向

Question

我有以下CSS影子：

box-shadow:green 0 1px 3px;

现在，如果我只想更改 方向 在影子中，我尝试了：

box-shadow:inherit 2px 0 inherit;

但这不幸的是不起作用。另外，看起来没有其他可用属性，例如：

box-shadow-direction:2px 0;

或者

box-shadow-color:inherit;

---

如何在不改变颜色或强度的情况下改变方向？

Answer 1

我知道没有像 background-repeat, margin-left, border-bottom 为了 box-shadow, text-shadow CSS3 属性。有关更多详细信息，请参考： http://www.w3.org/tr/css3-background/#box-hadow .

“ Box-Shadow”属性将一个或多个掉落阴影连接到盒子上。该属性是阴影的逗号分隔列表，每个属性由2-4个长度值，可选的颜色和可选的“插图”关键字指定。省略的长度为0；省略的颜色是UA选择的颜色。

在哪里

<shadow> = inset? && [ <length>{2,4} && <color>? ]

因此，您不能像 box-shadow-direction:2px 0; 定义后 box-shadow 到HTML元素，直到它或类似的子归因于CSS的下一个版本。

Answer 2

这样定义了盒子阴影：XY Blur扩展颜色。

因此，如果您想移动盒子阴影，请更改X和Y。

box-shadow: 10px 10px 5px #000;

该代码创建一个黑匣子阴影，该阴影位于顶部和左侧的10px。 （请注意，我不必指定价差数量。）