5

嗨，试图在除顶部之外的所有侧面都获得阴影，对于下拉子菜单，在此站点上找到了此代码，它在所有侧面都有阴影，但没有底部

body {
     width: 300px;
     height: 200px;
     margin: 20px auto;

 -webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 -moz-box-shadow:    0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 box-shadow:         0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
 }

我如何改变为除顶部之外的所有方面的阴影？
一直在尝试小提琴，但我一生都无法理解上面的代码来改变它从上到下的影子
http://jsfiddle.net/PuKDb/

需要它像这样
http://jsfiddle.net/leaverou/8tgAp/
但上面的阴影不是红线......

我是一个剪切和粘贴编码器，所以会有任何帮助！

4

4 回答 4

11 
body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

没有解释，因为您显然对它为什么起作用不感兴趣，只是它起作用了；）

于 2012-04-05T15:48:49.123 回答
2

可能作者永远不会再访问这个话题了，但我发现正确的定义是由两个声明而不是 3 个：

box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );

这很难解释，但如果你定义两种原色，你会在底部阴影中看到原因：

box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;

非零整数作为第一个值的存在混合了两种颜色，产生了一种新的颜色。

关键是，定义三个声明，其中一个将覆盖另一个（取决于参数），从而产生更暗的阴影。

这同样适用于垂直偏移。如果它们都相同（这里用 5px 表示），则会发生另一个叠加，如果为正，则在底部阴影中，如果为负，则在顶部阴影中（不是主题的情况）。

我希望它可以帮助别人。

于 2012-06-27T01:23:46.473 回答
0

这应该适合你

body 
{
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
于 2012-04-05T15:50:44.090 回答
0 
.div {
    -webkit-box-shadow: 0 3px 3px -3px #c00;
    -moz-box-shadow:    0 3px 3px -3px #c00;
    box-shadow:         0 3px 3px -3px #c00;
}

根据大小和模糊更改第二组数字。

于 2012-04-05T15:57:28.963 回答